元素水平垂直居中总结

水平居中

块级元素居中

块级元素加以下样式：

div {
  margin: 0 auto;
}

行内元素居中：

<div class="outer">
  <span class="inner">hello world!</span>
</div>

text-align:center;适用于行内元素，文字，图片以及inline-block在块级元素内居中。

.outer {
  text-align: center;
}

垂直居中

1.height=line-height：使行内元素，文字，inline-block元素在块级元素内居中。缺点：必须知道且固定外层块级元素的高度。

.outer {
  height: 300px;
  line-height: 300px;
}

2.vertical-align + table-cell：使行内元素，文字，inline-block元素以及块级元素在块级元素内居中。

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

绝对定位元素的居中

.outter {
  position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

优点：绝对居中，即使内外层容器宽高发生了变化，内层元素也是居中的。缺点：兼容性差。

浮动元素的居中

<div class="outer">
    <div class="box">
      <div class="inner">
        hello world!
      </div>
    </div>
  </div>

浮动元素水平居中原理：使浮动元素向右移动父元素的50%，再向左移动自身的50%，形成水平居中，所以要在浮动元素内部再加一层块级元素，通过相对定位实现向左平移50%。

.box {
  float:left;
  position: relative;
  left: 50%;
}
.inner {
  position: relative;
  left: -50%;
}

Flex布局

flex布局十分简洁，但是兼容性较差

.outer {//在外层元素上
  height: 300px;
  display: flex;
  justify-content: space-around;//元素水平居中
  align-items: center;//元素垂直居中
}