DIV垂直水平居中

Posted 2020-11-15 71yishen

1
.div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.div1{
display:inline-block;
}/*子div不能设置浮动*/

2.
.div{
display:flex;
align-items:center; /*垂直居中*/
justify-content: center; /*水平居中*/
}/*兼容性不好，不推荐*/

3.
.div1{
transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%); safari、chrome
-ms-transform:translate(-50%,-50%); ie
left: 50%;
top: 50%; /*垂直水平居中,父子div都要设置position，相对绝对都可以*/
transform:translateX(-50%);left: 50%; /*水平居中*/
transform:translateY(-50%);top: 50%;/*垂直居中*/
}

4.
.div1{
width: 300px;
height: 200px;
margin-left: -150px;//宽度的一半，很重要，不然不居中，会偏右
margin-top: -100px;//高度的一半
position: absolute;//绝对定位方式
top: 50%;
left: 50%;
background-color: aqua;//背景颜色，便于测试查看效果
}

5.

.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}