0%

关于居中方式

发表于 更新于

收录一些常用的居中方式，包括水平居中和垂直居中。

虽然这是很老的知识了，但是想要做的事，什么时候都不算晚。

其实使用 flex 或者 grid 能够解决大部分布局情况，虽然我还不会使用 grid 就是了。

另外，flex 真的好用哈哈哈哈哈哈哈哈哈。

水平居中

从常用的水平居中开始

  1. 当元素为行内元素时，且具有固定宽度，设置父元素text-align:center。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <html lang="en">
      <style>
        .box {
          height: 100px;
          padding: 10px 0;
          background: gray;
        }
        .inner-box {
          height: 50px;
          width: 400px;
          background: greenyellow;
        }

        .outer-box {
          /* 使用text-align，需要配合内容使用inline-block */
          text-align: center;
        }
        .outer-box .inner-box {
          display: inline-block;
        }
      </style>
      <body>
        <div class="box outer-box">
          <div class="inner-box">
            div: 我本来是一个块级元素，我需要使用样式转换成行内元素或行内块元素
          </div>
          <p>P: 我本来就是一个行内元素，所以我已经居中啦</p>
        </div>
      </body>
    </html>

  2. 当元素为块级元素，且具有固定宽度，则元素添加margin: 0 auto。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html lang="en">
      <style>
        .outer-box .inner-box {
          margin: 0 auto;
        }
      </style>
      <body>
        <div class="box outer-box">
          <div class="inner-box"></div>
        </div>
      </body>
    </html>

  3. 如果元素为绝对定位，设置父元素position:relative，元素设left:0; right:0; margin:auto。

    其实这里主要生效的还是margin:auto，但是不同的情况就是这里的元素使用了定位。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html lang="en">
      <style>
        .outer-box {
          position: relative;
        }

        .outer-box .inner-box {
          position: position;
          left: 0;
          right: 0;
          margin: auto;
        }
      </style>
      <body>
        <div class="box outer-box">
          <div class="inner-box"></div>
        </div>
      </body>
    </html>

    有一个变种的用法，如果元素具有宽度，那么可以配合使用 left: -[宽度的一半]px;margin-left: 50%; 或 margin-left: 50%;transform: translateX(-[宽度的一半]px);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <html lang="en">
      <style>
        .outer-box {
          position: relative;
        }

        .outer-box .inner-box {
          position: absolute;
          left: -200px;
          margin-left: 50%;
        }
        .outer-box .inner-box {
          position: absolute;
          margin-left: 50%;
          transform: translateX(-200px);
        }
      </style>
      <body>
        <div class="box outer-box">
          <p class="inner-box">123123123</p>
        </div>
      </body>
    </html>

  4. 使用 flex-box 布局，指定 justify-content: center，这个没有必要指定宽度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html lang="en">
      <style>
        .outer-box {
          display: flex;
          justify-content: center;
        }
      </style>
      <body>
        <div class="box outer-box">
          <div class="inner-box">123123123</div>
        </div>
      </body>
    </html>

  5. 最古老，也最不推荐使用的属性 display:table-cell，一般配合垂直居中使用，将在下面一起展示

垂直居中

  1. 接续上面的第五点，使用display:table-cell水平垂直居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <html lang="en">
      <head>
        <style>
          /*** table-cell middle center组合使用 ***/
          .cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 240px;
            height: 180px;
            border: 1px solid #666;
          }
          p {
            background: chartreuse;
          }
        </style>
      </head>
      <body>
        <div class="cell">
          <p>我爱你</p>
        </div>
        <div class="cell">
          <p>我爱你</p>
          <p>亲爱的中国</p>
        </div>
        <div class="cell">
          <p>我爱你</p>
          <p>亲爱的中国</p>
          <div
            style="width:100px;height:50px;border:1px solid #ccc;display:inline-block"
          >
            div(inline-block)
          </div>
        </div>
      </body>
    </html>

  2. 使用 flex-box 布局，指定 align-items: center，没有必要指定宽度，但只适用于单个元素，如果多个元素需要指定 flex-direction: column; 则需要使用 justify-content: center，水平居中同理。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html lang="en">
      <style>
        .outer-box {
          display: flex;
          align-items: center;
        }
      </style>
      <body>
        <div class="box outer-box">
          <p class="inner-box">123123123</p>
        </div>
      </body>
    </html>

  3. 绝对定位总设置 bottom:0;top:0;，并设置 margin:auto

  4. 绝对定位中固定高度时，设置 top:50%;margin-top:[高度一半的负值]

  5. 单行文本垂直居中设置 line-height 为 height 值

其他

  1. 关于文字垂直居中，当行文本与垂直居中一致，但多行文本需要多一层元素嵌套，再对外层元素进行垂直居中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <html lang="en">
      <style>
        .box {
          height: 100px;
          width: 500px;
          padding: 10px 0;
          background: gray;
        }
        .inner-box {
          width: 400px;
          background: greenyellow;
        }
        .outer-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
        }
      </style>
      <body>
        <div class="box outer-box">
          <p class="inner-box">
            123123123解决了金克拉金克拉金克拉广东省价格的冷静客观冷静客观艰苦艰苦了更多京东方尽快搞定了司空见惯了肯定是经过了觉得时间过来看的时间里就123123123解决了金克拉金克拉金克拉广东省价格的冷静客观冷静客观艰苦艰苦了更多京东方尽快搞定了司空见惯了肯定是经过了觉得时间过来看的时间里就123123123
          </p>
        </div>
      </body>
    </html>

写在最后

我也不知道为什么以前会有那么多垂直居中的情况，也很久没有遇到了，自己复现也经常复现不出来。

以后遇到的话往这里写吧。