学习中的问题:04如何居中一个元素？

在做页面布局的时候，经常会遇到使一个元素居中这种情况，今天系统的总结一下。

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%自身长度。