/* div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, */
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
/* div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。 */
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
/* div绝对定位水平垂直居中【Transforms 变形】*/
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
/* css不定宽高水平垂直居中 */
.box{
height:600px;
display:flex;
justify-content:center;
align-items:center;
/* 三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
/* 将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中 */
/*
table-cell实现居中
将父盒子设置为table-cell元素,设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/
css水平垂直居中的五种方式
猜你喜欢
转载自blog.csdn.net/z591102/article/details/105091440
今日推荐
周排行