闵行做网站分享用CSS实现垂直居中的效果

不管是初学者，还是有经验的网站技术人员，都需要经常用css实现垂直居中的效果。闵行做网站 明企科技总结了一下在不同浏览器下，通过CSS（层叠样式表）实现居中效果的方法。
用绝对定位实现垂直居中
举例说明：网站上有一张图片，我们想让它居中，首先我们需要创建一个div容器去包裹它，然后给它定义一些样式。
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
现在我们有了一张包裹在div中的图片，我们给不光给图片以及div元素定义了尺寸，还给div元素定义了#fff的背景色。 现在我们需要给我们的父元素添加相对定位属性，同时，要给子元素也就是图片元素添加绝对定位属性。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}
现在，我们会将子元素的top属性设置为50%。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}
目前为止图片还没有实现垂直居中，现在我们需要给它一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，在本例中就是那张图片。 *如果不确定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);属性。 div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px; /* half the size of image */
}
闵行做网站 明企友情提醒：如果你想要同时实现水平居中，那么你可以用实现垂直居中的一样的技巧来实现。 利用Display: table;来实现垂直居中 我们可以通过display属性的table值来实现垂直居中。如何实现呢？ 首先我们先要创建一个div元素以及另外一个包含图片的div元素，然后我们开始设置它的样式。
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
现在，把包裹图片的那个div元素的display属性设置为table-cell。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
}
但是现在好像还没有居中，对吧？当然啦，为了实现垂直居中，我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
vertical-align: middle;
}
闵行做网站 明企提示：如果你也想实现水平居中，你可以给最外层的div元素添加text-align: center属性，注意不是id=”img”的div 使用flex实现垂直居中 最后但是也同样重要的是，你可以利用flex实现垂直居中。flex可能不是实现水平垂直居中最好的选择，因为IE8,9并不支持它。 你可以点这里看看浏览器是否支持：点击这里 现在，为了用flex实现垂直居中，我们首先要创建一个包裹着图片的div元素，然后给它定义一些基础属性。
HTML
----------
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
height: 100px;  /* you must give height so it doesn't expand */
}
现在，我们需要把div元素的display属性设置为flex。 div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
}
现在还没居中是吧？继续，现在我们需要做的就是给div添加另外一条属性align-items: center;
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
align-items: center;
}
说到这里，相信现在你知道如何用CSS去实现垂直居中了。希望这篇文章对大家的有所帮助，当然如果关于网站开发还有什么不明白的地方，闵行做网站 明企技术人员很乐意和大学交流心得。