居中在平时的运用很多，以下简单做了一些总结。

1.块级元素居中

统一 html 格式如下：

    
        
     
      content
     
    
    
  复制代码

居中效果如下：

1.1 relaive 居中

1.1.1 已知父元素子元素高度

.container{            width: 300px;            height: 300px;            background-color: aquamarine;            overflow: hidden; /*或 position: 'absolute' 触发BFC */        }        .content{            width: 80px;            height: 80px;            background-color: blueviolet;            position: relative;            margin: 110px auto;        }复制代码

1.1.2 未知父元素高度，已知子元素宽度、高度

.container {        width: 300px;        height: 300px;        background-color: aquamarine;        overflow: hidden;      }      .content {        width: 80px;        height: 80px;        background-color: blueviolet;        position: relative;        margin: 50%;        top: -40px;        left: -40px;      }复制代码

1.1.3 未知父元素高度，未知子元素宽度，已知子元素高度

.container {        width: 300px;        height: 300px;        background-color: aquamarine;        overflow: hidden;      }      .content {        width: 80px;        height: 80px;        background-color: blueviolet;        position: relative;        margin: 50% auto;        top: -40px;      }复制代码

1.2 absolute 居中

1.2.1 已知父元素、子元素宽高度

.container {        width: 300px;        height: 300px;        background-color: aquamarine;        overflow: hidden;        position: relative;      }      .content {        width: 80px;        height: 80px;        background-color: blueviolet;        position: absolute;        top: 50%;        left: 50%;        margin-left: -40px;        margin-top: -40px;      }复制代码

1.2.2 未知父元素、子元素宽高度

.container {        width: 300px;        height: 300px;        background-color: aquamarine;        overflow: hidden;        position: relative;      }      .content {        width: 80px;        height: 80px;        background-color: blueviolet;        position: absolute;        top: 0;        bottom: 0;        left: 0;        right: 0;        margin: auto;      }复制代码

1.3 flex 居中

.container {        width: 300px;        height: 300px;        background-color: aquamarine;        color: #fff;        display: flex;        align-items: center;        justify-content: center;      }      .content {        width: 80px;        height: 80px;        background-color: blueviolet;      }复制代码

2. 块级元素内容居中

统一 html 格式如下：

    
        
     
      块级元素内容居中
     
    
    
复制代码

居中效果如下：

2.1 flex 布局

.container {        width: 80px;        height: 80px;        background-color: blueviolet;        color: #fff;        display: flex;        align-items: center;        text-align: center;    }复制代码

2.2 模拟 table

.container {        width: 80px;        height: 80px;        background-color: blueviolet;        color: #fff;        display: table;        text-align: center;      }            .content { /*也可用于行内元素内容居中*/        background-color: blueviolet;        display: table-cell;        vertical-align: middle;      }复制代码