法一:绝对定位,子绝父相,首先将元素的左上角通过过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心。(需要考虑兼容性)
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
法二:绝对定位,子绝父相,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半 */
margin-left: -50px; /* 自身 width 的一半 */
}
法三:绝对定位,子绝父相,设置top,right,bottom,left值为0,margin设置为auto,适用于盒子有宽高的情况。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
法四:flex布局。针对父元素.
.parent {
display: flex;
justify-content:center;
align-items:center;
}
法五:flex布局。
.parent {
display: flex;
}
.child {
margin: auto;
}
法六:flex布局。
.parent {
display: flex;
}
.child {
align-self:center; //垂直居中
margin:auto;
}
法七:grid布局
.parent {
display: grid;
}
.child {
justify-self:center;
align-self:center;
}
法八:(不常用)
.parent {
display: table;
vertical-align:center;
text-align:center;
}
.child {
display:inline-block;
}
法九:div中只有一行文字的时候
text-align:center;
line-height:父级高度