|
按照现有状况选取水平垂直居中的办法：
1、父元素定宽定高
(1)块级元素
办法1、子元素position:relative;top:50%;left:50%;transform:translate(-50%,-50%);能够不消事先晓得父元素的宽高，就可实现居中，然则这个办法兼容性较差。
.parent{
width:400px;
height:400px;
bac公斤round:yellow;
}
.child{
width:200px;
height:200px;
bac公斤round:red;
position:relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
办法2、绝对定位居中，子元素position:absolute;left:0;right:0;top:0;bottom:0;margin:auto；父元素position:relative;兼容性较好。
.parent{
width:400px;
height:400px;
bac公斤round:yellow;
position:relative;
}
.child{
width:200px;
height:200px;
bac公斤round:red;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
办法3、父元素display: flex;justify-content: center;align-items: center;移动端页面经常用。
.parent{
width:400px;
height:400px;
bac公斤round:yellow;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width:200px;
height:200px;
bac公斤round:red;
}
办法四：利用伪元素,让子元素display：inline-block；vertical-align: middle;，再让父元素的伪元素height: 100%;display: inline-block;vertical-align: middle;
.parent{
width:400px;
height:400px;
bac公斤round:red;
text-align:center;
}
.child{
width:200px;
height:200px;
bac公斤round:yellow;
display:inline-block;
vertical-align: middle;
}
.parent::before {
content: ;
height: 100%;
display: inline-block;
vertical-align: middle;
}
（2）内联元素
办法1、跟上面的display：flex办法同样，运用flex办法块级元素能实现居中，内联元素亦能实现居中。
.parent{
width:400px;
height:400px;
bac公斤round:red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
bac公斤round:yellow;
}
办法2、父元素用text-align:center;水平居中，子元素用line-height: 父元素的高度;垂直居中，这个经常用，个人觉得是除flex外最好的办法。然则要重视：内容必要是单行才可用，倘若多行就不可用了。
.parent{
width:400px;
height:400px;
bac公斤round:red;
text-align:center;
}
.child{
bac公斤round:yellow;
line-height: 400px;
}
办法3、父元素display:table-cell;text-align: center;vert
| 
发表于 2024-6-30 05:58:26