几种常见的div水平垂直居中的方法
.father{
height: 300px;
width: 300px;
background-color: red;
}
.son{
height: 100px;
width: 100px;
background-color: blue;
}
以下所有方法基于以上div实现。
- 绝对定位方法:不确定当前div宽度和高度,采用transform: translate(-50%,-50%);当前div的父元素添加相对定位position: relative;
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- 绝对定位方法:确定了当前div的高度和宽度,margin值为当前div宽度和高度一半的负值
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
- 绝对定位方法:绝对定位下top,right,bottom,left都设置为0
.father{
position: relative;
}
.son{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
- flex布局方法:当前div的父元素添加flex CSS样式
.father{
display: flex;
align-items: center;
justify-content: center;
}
- table-cell实现水平垂直居中:table-cell middle center组合使用,子元素需要设置display: inline-block;
.father{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
display: inline-block;
}