不论是初学者，仍是有经历的网站手艺职员，都须要常常用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去完成垂直居中了。但愿这篇文章对大师的有所赞助，固然若是对于网站开辟另有甚么不大白的处所，武汉做网站 易人宣收集手艺职员很甘愿答应和大学交换心得。
领会更多武汉
网站扶植_汉阳
网站扶植_
武汉网站设想_
武汉网站建造常识可在线征询或增加易人宣收集小易姐姐微信:13307186778
