在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。

水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。

1. 使用display：inline-block和text-align：center

display:inline-block;

text-align：center;

原理就是将子容器设置为行内块元素，然后给父容器设置让文字居中的属性以达到目的。

缺点就是里面文字都会居中，可单独设置样式来解决。

2. 使用position：absolute和transform

position:absolute;

transform: translateX(-50%);

原理就是先将子容器设置为相对定位，移动左侧距离为相对宽度的一半，这样会使整个容器的左侧在一半的线的位置，看起来靠右了，我们需要再通过向左移动子容器的一半来达到目的。

缺点就是transform属于css3内容，存在浏览器兼容问题。已知宽高时可以将transform换成margin-left设置为负的自身宽度一半达到相同的目的。

4. 使用flex和justify-content

display:flex;

justify-content:center;

原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过justify-content属性来达到居中。这种方式需要给父容器设置这两种属性。

缺点就是css3属性，有浏览器兼容问题。

垂直居中：垂直居中就是为了让子元素在父元素中排列在垂直中心位置，实现方式很多，我们看几种常用的。

1. 使用display：table-cell和vertical-align

display:table-cell;

vertical-align:middle;

原理就是通过将父容器转换为一个表格单元格来显示，再通过将表格单元格内容垂直居中。

使用时需要将两种属性都设置到父容器身上。

2. 使用position：absolute和transform

position:absolute;

transform: translateY(-50%);

原理类似于水平居中，就是先将子容器设置为相对定位，移动顶部距离为相对高度的一半，这样会使整个容器的顶部在一半的线的位置，看起来靠下了，我们需要再通过向上移动子容器的一半来达到目的。

缺点就是css3属性，有浏览器兼容问题。已知宽高情况时可以将transform换成margin-top设置为负的自身高度一半达到相同的目的。

3. 使用display：flex和align-items

display:flex;

align-items:center;

原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过align-items属性来达到居中。这种方式需要给父容器设置这两种属性。

缺点就是css3属性，有浏览器兼容问题。

水平垂直同时居中：

关于同时居中有了以上两种方式难道还怕出不来效果吗，只是需要稍稍结合一下即可，比如以下常见结合使用：

1. 使用position:absolute和margin（已知宽高）

position:absolute;

left:50%;

top:50%;

width:100px;

height:100px;

margin-left:-50px;

margin-top:-50px;

2. 使用position:absolute和transform（未知宽高）

position:absolute;

left:50%;

top:50%;

transform: translateX(-50%);

transform: translateY(-50%);

3. 使用position:absolute和margin（未知宽高）

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

4. 使用flex和justify-content和align-items属性（未知宽高）

display:flex;

justify-content:center;

align-items:center;

关于常见居中问题就说几种常用的，其它技巧小伙伴们可自行研究，相信还有很多奇怪的方式也可以达到效果。