1、水平居中

<div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div>

2、绝对定位水平垂直居中

<div style="position: absolute;
     width: 500px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: green;">水平垂直居中</div>

3、水平垂直居中一

<div style="position: relative;
     width:400px;
     height:200px;
     top: 50%;
     left: 50%;
     margin: -100px 0 0 -200px;
     background-color: red;">水平垂直居中</div>

4、水平垂直居中二

<div style="position: absolute;
     width:300px;
     height:200px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: blue;">水平垂直居中</div>

5、flex 布局居中

<div style="display: flex;align-items: center;justify-content: center;">
    <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>
</div>

详细：

水平居中

1.1 display: inline-block

在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，
这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

当有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙，这不是什么 bug ，特性就是如此。。

如果想去掉这些缝隙的话，有几种解决方法：

1.去掉 HTML 中的空格。

元素之间留白间距出现的原因是因为标签段之间的空隙，这个时候只需要去除掉 HTML 之间的空隙就好了。

比如这种写法，当然写法也有很多种，只要保证把空隙去掉就可以了，但是这种方法总觉得写起来有点反人类。

<div class="parent">
  <div class="child">
  DEMO1</div
  ><div class="child">
  DEMO2</div
  ><div class="child">
  DEMO3</div>
</div>

2.使用 margin 负值

这种方法这个负的值不太好确定，和上下文的字体等等都有关，这种方法不太适合大规模的使用。

.child {
  margin-right; -5px;
}

3.使用 font-size: 0

这种方法能十分简单地这个间距问题，只需要将父 div 的 font-size 设为0 ，然后记得将子 div 的 font-size 属性设置回来即可。

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4.使用 letter-spacing 或者 word-spacing

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

1.2 display:table

table 元素的宽度也是跟着内容走，居中的时候加上 margin 即可。兼容IE8。

如果不设置成table,设置成别的块级元素也可以，但是要强调设置宽度width，不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好，如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)

.child {
  display:table;
  margin:0 auto;
}

1.3 position: absolute

absolute 元素的宽度默认也是由内容决定

这种方法的优点是居中的元素不会对其他元素产生影响脱离正常流

.parent {
  position:relative;
}
.child{
  position:absolute; /*参照物是父容器*/
  left:50%;
  transform:translateX(-50%); /*百分比的参照物是自身*/

1.4 dispaly: flex

只兼容IE10+

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

2.垂直居中

2.1 display: table-cell

可以使高度不同的元素都垂直居中

.parent {
  display:table-cell;
  vertical-align:middle;
}

2.2 position: absolute

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 参照物是父容器 */
  transform:translateY(-50%); /*百分比的参照物是自身 */
}

2.3 display: flex

只兼容IE10+

.parent {
  display:flex;
  align-items:center;
}
/*或者*/
.child{
  margin：0 auto;
}

3.水平垂直居中

这种就只需要把前几种的结合起来就行了，主要有三种常见的方法。

3.1 inline-block + table-cell

.child {
  display:inline-block;
  text-align:left;
}
.parent {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
/*子元素文字会继承居中，因此要在上面写上向左边居中*/

3.2 absolute + transform

.parent {
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%; /*参照物是父容器*/
  transform:translate(-50%,-50%); /*百分比的参照物是自身*/
}

3.3 flex + align-items + justify-content

.parent {
  display:flex;
  justify-content:center;
  align-items:center;
}

注：transform 各种影响

**1、提升元素的z-index层级**，

下面这个例子会让前面的图片显示在上面，一般来说应该是后面的覆盖前面图片的

<img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">

**2、父元素设置了transform:scale(1)，子元素的fixed就失效了，退化成absolute**

标签

<div style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;" /></div>

**3、overflow与absolute之间的限制规范内容**大致是：absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。absolute元素和overflow元素间，含有transform的时候，absolute会被隐藏。

.overflow { width: 191px; height: 191px; border: 2px solid #beceeb; overflow: hidden; }.overflow img { position: absolute; }.transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

<div class="overflow">    <div class="transform">        <img src="mm1.jpg" />    </div></div>

4、限制absolutely宽度100%大小，以前，我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算，没有就window。如果前面有设置了transform的元素，也会相对它来计算了

如何让有transform效果的父元素不影响其子元素

解决方案1: 设置后代：

du .children1, .children2, .childrenN { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; }

或者让后代反向操zhi作，比如反向旋转dao：

.parent { position: relative; background-color: yellow; width: 200px; height: 150px; margin: 70px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }

.child { position: absolute; top: 30px; left: 50px; background-color: green; width: 70px; height: 50px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }

css元素水平居中和垂直居中的几种方式和transform 各种影响

详细：