在做页面布局的时候,经常会遇到使一个元素居中这种情况,今天系统的总结一下。
1.行内元素
水平居中
为其父元素设置属性text-align:center;
垂直居中
height和line-height的值相同,只写line-height也是可以的。
2.块级元素
水平居中
如果这个块级元素给了宽度,那么应用margin:0 auto;属性可以使其水平居中
如果没给这个块级元素宽宽度,请看下面:
<div class="father">
<div class="son"></div>
</div>
.father{
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
.son{
width: 100px;
height: 100px;
position: absolute;
background: blue;
left: 50%;
transform: translateX(-50%);
}
可以通过定位,向右移动父元素的50%,此时超过中线半个本身长度,所以使用translateX左移50%自身长度。
垂直居中
如果给了高度,可以通过计算,使margin的top和bottom的值相等。
也可以在设置定位后,将其top和bottom的值设置为同一值,然后设置margin:auto;也可以达到垂直居中的效果。
如果没给高度。
也可以通过向上面水平居中的方式,通过定位,向下移动父元素的50%,此时超过中线半个本身长度,所以使用translateY上移50%自身长度。