垂直居中用绝对定位实现垂直定位
无论是初学者还是有经验的网站技术人员，都需要经常使用css来实现垂直居中的效果。
朝阳做网站
总结了通过CSS(层叠式样式表)在不同浏览器下达到中心效果的方法。
垂直居中用绝对定位实现垂直定位
例如，网站上有一张图片。如果我们想让它在中间，我们需要创建一个div容器来包裹它，然后定义一些风格。
HTML
-----
CSS
-----
body{
background: #ccc;
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
现在我们有一张包裹在div中的图片。我们不仅为图片和div元素定义了尺寸，还为div元素定义了#ff的背景颜色。现在我们需要为我们的父亲添加相对定位属性，同时，我们需要为子元素，即图片元素添加绝对定位属性。
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;
}
朝阳做网站
好三六友情提醒:如果想同时实现水平居中，可以用同样的技巧实现垂直居中。使用Display:table;为了实现垂直居中，我们可以通过display属性的table值实现垂直居中。如何实现？首先，我们需要创建一个div元素和另一个包含图片的div元素，然后我们开始设置它的风格。
HTML
-----
CSS
-----
body{
background: #ccc;
}
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元素中添加texttt-align:center属性，注意不是id=”img“div使用flex实现垂直居中，但同样重要的是，您可以使用flex实现垂直居中。flex可能不是实现水平垂直的最佳选择，因为IE8和9不支持它。您可以点击此处查看浏览器是否支持：点击此处。现在，为了使用flex实现垂直居中，我们应该首先创建一个包含图片的div元素，然后定义一些基本属性。
HTML
----------
CSS
-----
body{
background: #ccc;
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
height: 100px;
}
现在，我们需要将div元素的display属性设置为flex。div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px;
}
现在还没有在中间，对吧？继续，我们现在需要做的是为div添加另一个属性align-items:center;
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center;
}
img{
width: 100px;
height: 100px;
align-items: center;
}
说到这里，我相信你现在知道如何使用CSS来实现垂直居中。我希望这篇文章能对你有所帮助。当然，如果你不了解网站开发，
朝阳做网站
好的三六技术人员很乐意与大学交流经验。
