本文的目的为记录个人开发中常用的几种居中方案,以供大家参考。
//basic css
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
************************************************居中相关************************************************
假设div的宽高均为100px。
1.div水平居中,直接使用margin:0 auto;
2.使用绝对定位让div水平垂直居中。(若想要div在某个特定的容器中水平垂直居中,则需要把容器的position设置为relative)
.div {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin: -50px 0 0 -50px;
}
3.使用相对定位让div水平垂直居中。
.div {
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
4.文字的水平居中,直接设置容器text-align: center;
5.文字的水平垂直居中, 设置容器text-align: center; line-height: 容器的高度;
************************************************居中相关************************************************