1、利用彈性盒子
將父元素設(shè)置為display:flex;
通過(guò)：
?justify-content: center;
?align-items: center;
來(lái)設(shè)置元素的垂直水平居中
2、將元素轉(zhuǎn)化為表格的形式
父元素設(shè)置：
?display: table-cell;
?vertical-align: middle;
?text-align: center;
子元素需設(shè)置：
display: inline-block;
?vertical-align: middle;//消除行內(nèi)塊元素三像素問(wèn)題
3、利用絕對(duì)定位
將父元素設(shè)置為相對(duì)定位
position:relative;
子元素設(shè)置絕對(duì)定位
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
4、利用translate
將父元素設(shè)置為相對(duì)定位
position:relative;
子元素設(shè)置絕對(duì)定位
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
子元素的寬高自己設(shè)置
5、利用 margin-top: ;和margin-left: ;
將父元素設(shè)置為相對(duì)定位
position:relative;
子元素設(shè)置絕對(duì)定位
position: absolute;
top:50%;
left:50%;
margin-top:-(自身高度的一半）?;
margin-left:-（自身寬度的一半）?;
例：
.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-793192.html
margin-left: -50px;文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-793192.html
到了這里，關(guān)于元素水平垂直居中的5種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
