CSS 居中布局

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

1.块级元素居中

统一 html 格式如下：

    <div class="container">
        <div class="content">content</div>
    </div>  

居中效果如下：

居中效果

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;
      }

也可结合 transform

      .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%;
        transform: translate(-50%, -50%);
      }

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 格式如下：

    <div class="container">
        <div class="content">块级元素内容居中</div>
    </div>

居中效果如下：

image

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;
      }

3 行内元素内容居中

3.1 水平居中： text-align:center；

3.2 垂直居中：

3.2.1 父元素高度确定的单行文本（内联元素）：height = line-height；

3.2.2.父元素高度确定的多行文本（内联元素）:

• 父元素display:table；
• 子元素设置 display:table-cell ; vertical-align:middle