居中问题浅谈

在CSS的世界里居中一直都是人们抱怨的一件事。“居个中为什么就这么难呢?”人们无奈的说。我认为困难的不是怎么做他,而是怎样在不同的情况下,用不同的方法去达到这相同的目的---居中。

所以 让我们来解决这个问题吧

水平居中(Horizontally)

  • 行内块元素(inline or inline-* element)

.center-children {
text-align: center;
}
```

  • 一个块级元素(one block level element)

.center-me {
margin: 0 auto;
}
```

  • 多个块级元素(some block level elements)

    HTML

    <main class="inline-block-center">
        <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
        </div>
        <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
        </div>
        <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
        </div>
    </main>
    
        <main class="flex-center">
          <div>
            I'm an element that is block-like with my siblings and we're centered in a row.
          </div>
          <div>
            I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
          </div>
          <div>
            I'm an element that is block-like with my siblings and we're centered in a row.
          </div>
        </main>
    

    CSS

        body {
          background: #f06d06;
          font-size: 80%;
        }
    
        main {
          background: white;
          margin: 20px 0;
          padding: 10px;
        }
    
        main div {
          background: black;
          color: white;
          padding: 15px;
          max-width: 125px;
          margin: 5px;
        }
    
        .inline-block-center {
          text-align: center;
        }
        .inline-block-center div {
          display: inline-block;
          text-align: left;
        }
    
        .flex-center {
          display: flex;
          justify-content: center;
        }
    

    总之:

    • text-align

垂直居中(Verticallly)

  • 行内块元素(inline or inline-* element)

    • 单行情况

      padding

          .link {
              padding-top: 30px;
              padding-bottom: 30px;
          }
      

      line-height

          .center-text-trick {
            height: 100px;
            line-height: 100px;
            white-space: nowrap;
          }
      
    • 多行情况

      HTML

      <table>
        <tr>
          <td>
            I'm vertically centered multiple lines of text in a real table cell.
          </td>
        </tr>
      </table>
      
      <div class="center-table">
        <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
      </div>
      

      CSS

      body {
        background: #f06d06;
        font-size: 80%;
      }
      
      table {
        background: white;
        width: 240px;
        border-collapse: separate;
        margin: 20px;
        height: 250px;
      }
      
      table td {
        background: black;
        color: white;
        padding: 20px;
        border: 10px solid white;
        /* default is vertical-align: middle; */
      }
      
      .center-table {
        display: table;
        height: 250px;
        background: white;
        width: 240px;
        margin: 20px;
      }
      .center-table p {
        display: table-cell;
        margin: 0;
        background: black;
        color: white;
        padding: 20px;
        border: 10px solid white;
        vertical-align: middle;
      }
      

      总之:

      • padding
      • line-height
      • vertical-align
      • flex
  • 一个块级元素(one block level element)

    • 知道元素高度
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }
  • 不知道元素高度
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
  • 无所谓,flex解决一切
    .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

水平与垂直同时居中(Both Horizontally and Vertically)

  • 知道元素尺寸

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
  • 不知道元素尺寸

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
  • 无所谓,flex解决一切

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

总结(Conclusion)

只要你愿意,css会帮你完成这一切...

参考资料

推荐阅读更多精彩内容

  • 居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦?所以有人被嘲笑。我觉得问题不是没有办法做到,只是视情况而定...
    雨季诺言阅读 195评论 1 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,541评论 1 91
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,133评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,266评论 0 11
  • 为什么总是走神?为什么话题说着说着就跑题了?为什么在做某件事的时候突然想到要做另外一件事,但一转眼又忘了?...
    Dragonfly318阅读 117评论 0 2
  • 有声广播去除人声和背景音乐,只剩模拟声,那是一种怎样的相遇。 18.00。下班回家,把手机放好在牛仔裤口袋,发动摩...
    陈锦辉阅读 49评论 0 1
  • 从开封来到,从包公工作的地方到包公的出生地,如长江之水,一路向东。
    木子89阅读 93评论 0 0
  • 这几天朋友圈最热的应该是《华为50万年薪二孩爸爸中年失业还不起房贷》和两位85后小夫妻的《开一家小店到老,择一个人...
    喵小雨的语阅读 327评论 0 0