目录
1、position 定位法实现水平垂直居中
绝对定位元素的布局由元素的三个因素决定:位置(top、bottom、left、right)、元素尺寸 和 margin。
第一种:
// 父元素设置 position: relative;
// 子元素中
{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
第二种:
// 父元素设置 position: relative;
// 子元素中
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
第三种:
// 父元素设置 position: relative;
// 子元素中
.center{
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;// 子元素自身宽度的一半
margin-top: -25px;// 子元素自身高度的一半
}
2、flex 弹性盒法实现水平垂直居中
// 给容器设置
{
display: flex;
justify-content: center;// 主轴居中
align-items: center;// 与主轴交叉的轴居中
}
3、table-cell 法实现水平垂直居中
// 给容器(父元素)设置
{
display: table-cell;
vertical-align: middle;// 垂直居中
margin: 0 auto;// 水平居中
}
4、inline-block 法实现水平垂直居中
给元素所在的父元素设置:
{
margin: 0 auto;
}
然后,在元素 A 后添加一个新的空标签(一般可以是 “<span></span>” 标签)。
给元素 A 运用下面的样式:
{
display: inline-block;
vertical-align: middle;
}
最后,给新添加的标签(“<span></span>”)设置样式:
{
display: inline-block;
vartical-align: middle;
width: 0;
height: 100%;
}