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;
      }
复制代码

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>
复制代码

居中效果如下：

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;
      }
复制代码

转载于:https://juejin.im/post/5c6a215bf265da2dec622f04