元素居中的方式（子元素如何在父元素内居中？）

一个子元素如何在父元素内居中？实现如图的样子

1、行内元素

如果子元素是行内元素，就可以用这种方法。父元素text-align:center，子元素设置行高line-height：父元素的高。

2、弹性盒子flex布局

3、利用定位来实现居中。

子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半 。

首先利用定位让子元素移动到元素的50%，创建出一个中线，再让子元素左移动它自身的一半。相当于以中线为基准，左移动自身一半，那么剩下在右边的就是另一半。

该方法具有一定的局限性，因为其必须要知道子元素本身的宽高

理解：

1、未设置前，图是这样

2、用定位让子元素挪移到父元素的50%，以此作为父元素左半边和右半边

3、此时子元素移动它自身的一半，就实现了左右相等（左右居中）。以此类推，再同样设置高，就完成了上下左右居中。

4、 利用定位来实现居中（推荐）。

子元素相对于父元素绝对定位，并且margin值设置为：auto

这个方法比第三种好，因为不需要知道子元素的宽高，可以直接设置。推荐用这种。

如果需要定位在页面正中央，就把absolute更换成fixed就ok

5、利用Css3的变形属性，translate