|
原文链接：Can you vertically center in CSS?
作者：Usama Tahir
翻译：Klaus
声明：转载请注明出处。
怎样用CSS（层叠样式表）实现垂直居中呢？这可能是网站研发人者最常问的问题之一了，不论他是有有些经验的研发者还是刚起始学习。
因此，实现垂直居中最好的办法是什么呢？这儿有不止一种办法能够实现。然则你应该选取一种浏览器支持最好的以及最容易实现的。
首要咱们会介绍哪些浏览器支持比较好的办法，结尾部分会介绍哪些浏览器支持较差的办法。
让咱们起始吧……
用绝对定位实现垂直居中
咱们有一张照片，并且想让它居中，首要咱们必须创建一个div容器去包裹它，而后给它定义有些样式。
HTML
-----<div>
<img src=”http://bit.ly/2jeCm3H" alt=”” />
</div>
-----
CSS
-----
body{
bac公斤round: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
bac公斤round: #fff;
}
img{
width: 100px;
}
此刻咱们有了一张包裹在div中的照片，咱们给不但给照片以及div元素定义了尺寸，还给div元素定义了#fff的背景色。
此刻咱们必须给咱们的父元素添加相对定位属性，同期，要给子元素亦就是照片元素添加绝对定位属性。
div{
width: 300px;
height: 250px;
bac公斤round: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}
此刻，咱们会将子元素的top属性设置为50%。
div{
width: 300px;
height: 250px;
bac公斤round: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}
日前为止照片还无实现垂直居中，此刻咱们必须给它一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，在本例中便是那张照片。
*倘若不确定元素的高度，能够不运用margin-top，而是运用transform:translateY(-50%);属性。——译者注
div{
width: 300px;
height: 250px;
bac公斤round: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px; /* half the size of image */
}
记住：倘若你想要同期实现水平居中
| 
发表于 2024-6-30 06:09:41
楼主