在页面布局中，怎么实现水平居中和垂直居中？

先给出DOM结构

<div class="box"><div class="box-center">
     </div>
</div>

一：水平居中

若是行内元素，给其父元素设置text-align:center即可实现行内元素水平居中

若是块级元素，该元素设置margin:0 auto即可（元素需要定宽）

若是块级元素，设置父元素为flex布局，子元素设置margin:0 auto即可（子元素不需要定宽）

1.使用flex 2012年版本布局，可以轻松的实现水平居中，子元素设置如下:

.box {
      width: 200px;
      height: 200px;
      display: flex;
      // 使内部的flex项目水平居中
      justify-content: center;
      background-color: pink;
}

2.使用绝对定位和CSS3新增的属性transform（这个属性还和GPU硬件加速、固定定位相关）

.box {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: pink;
    }
    
    .box-center {
      position: absolute;
      left:50%;
      // width: 50%;
      height: 100%;
      // 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
      // translate(x,y)    定义 2D 转换。
      // translateX(x)    定义转换，只是用 X 轴的值。
      // translateY(y)    定义转换，只是用 Y 轴的值。
      // left: 50% 先整体向父容器的左侧偏移50%，此时是不能居中的，因为元素本身有大小
      // 接着使用transform使用百分比向左偏移本身的宽度的一半实现水平居中（这里的百分比以元素本身的宽高为基准）
      transform:translate(-50%,0);
      background-color: greenyellow;
    }

3.使用绝对定位和margin-left（元素定宽）

.box {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: pink;
    }
    
    .box-center {
      position: absolute;
      left:50%;
      height: 100%;
      // 类似于transform// width: 50%;// margin-left: -25%;
      width: 100px;
      margin-left: -50px;
      background-color: greenyellow;
    }

二：垂直居中

若元素是单行文本, 则可设置line-height等于父元素高度

若是块级元素，设置父元素为flex布局，子元素设置margin: auto 0即可（子元素不需要定宽）

1若元素是行内块级元素，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央：

    .box {
      height: 100px;
    }
    
    .box::after, .box-center{
      display:inline-block;
      vertical-align:middle;
    }
    .box::after{
      content:'';
      height:100%;
    }

2.当居中元素高度不定时，

2.1可用 vertical-align 属性（vertical-align只有在父层为 td 或者 th 时才会生效,，对于其他块级元素，例如 div、p 等，默认情况是不支持的），为了使用vertical-align，我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle：

.box {
      height: 100px;
      display: table;
    }
    
     .box-center{
        display: table-cell;
        vertical-align:middle;
    }

2.2.可用 Flex 2012版, 这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题：优点：内容块的宽高任意, 优雅的溢出.  可用于更复杂高级的布局技术中.    缺点：IE8/IE9不支持、需要浏览器厂商前缀、渲染上可能会有一些问题。↓

.box {
      height: 100px;
      display: flex;
      align-items: center;
    }

2.3.可用 transform ，设置父元素相对定位：缺点：IE8不支持, 属性需要追加浏览器厂商前缀，可能干扰其他 transform 效果，某些情形下会出现文本或元素边界渲染模糊的现象。

  .box {
      height: 100px;
      position: relative;
      background-color: pink;
    }
    
    .box-center {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      background-color: greenyellow;
    }

3.居中元素高度固定时

3.1设置父元素相对定位，子元素如下css样式:

.box {
      position:relative;
      height: 100px;
      background-color: pink;
    }
    
    .box-center{
      position:absolute;
      top:50%;
      // 注意不能使用百分比// margin的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom
      height: 50px;
      margin-top: -25px;
    }

3.2设置父元素相对定位, 子元素如下css样式:

.box {
      position:relative;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    .box-center{
      position:absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      height: 100px;
      background-color: greenyellow;
    }

水平垂直居中

Flex布局（子元素是块级元素）

.box {
      display: flex;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    
    .box-center{
      margin: auto;
      background-color: greenyellow;
    }
```css

- Flex布局
```css
    .box {
      display: flex;
      width: 100px;
      height: 100px;
      background-color: pink;
      justify-content: center;
      align-items: center;
    }
    
    .box-center{
      background-color: greenyellow;
    }

绝对定位实现(定位元素定宽定高)

.box {
      position: relative;
      height: 100px;
      width: 100px;
      background-color: pink;
    }
    
    .box-center{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      background-color: greenyellow;
    }

---------------------------