CSS如何居中元素

How to center in CSS

一步步拆解你的需求，是水平居中还是垂直居中？还是水平垂直居中？父容器是inline还是block，高度知不知，宽度造不造？一个子元素还是多个子元素？一行还是多行？文字？图片？

理论知识

属性：text-align

用法：text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块级元素自己的对齐，只控制它的行内内容的对齐→→（demo展示text-align对行内元素与块元素的区别）

除了默认的行内元素（没有标签包围的文本默认是匿名行内元素）外，我们可以通过设置元素的display:inline、 inline-block、 inline-table、 inline-flex等一切inline 或 inline-*elements值。

属性：verical-align

用法：CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

1.水平居中

content: inline or inline-* elements (like text or links)

.container {
text-align: center;
}

content: block-level element

多个块级元素一行展示

.container {
text-align: center;
}
.content-center {
display: inline-block;
}

可实现多个块级多行展示(前提：知道width值px/em/%)

.content-center {
width: 400px;
margin: 0 auto;
}

2.垂直居中

content: for inline or inline-* elements (like text or links)

  • 单行
    • padding-top = padding-bottom
    • line-height = height(需要注意的是，必须先设置字号font-size，再设置line-height，否则文本居中。因为字号的改变，会使行高发生改变。)
  • 多行

    • padding-top = padding-bottom

    • Table cell（前提：知道container高度height值px/em/%）

      .container {
      display: table;
      }
      .content-center {
      display: table-cell;
      verical-align: middle;
      }

    • flexbox（前提：知道container高度height值px/em/%）

      .container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;
      }

    • 给父容器加一个伪类元素作为子内容的vertical:middle校准内容。

      .container {
      position: relative;
      }
      .container::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
      }
      .container content-center {
      display: inline-block;
      vertical-align: middle;
      }

content: block-level element

  • known: 元素的高度height值

    • 使用定位position与负外边距margin

      .container {
      position: relative;
      }
      .content-center {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
      }

  • unknown: 元素的高度height值

    • 使用定位position与transform

      .container {
      position: relative;
      }
      .content-center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      }

  • flexbox（高度知不知都行，缺点是IE11+才能用）

    .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

3.水平垂直居中

  • known: 元素的高度height值和width值

    • 使用定位position与负外边距margin
      .container {
      position: relative;
      }

      .content-center {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 300px;
      height: 100px;
      padding: 20px;
      margin: -70px 0 0 -170px; /* 此处元素的高度、宽度要加上padding的大小 */
      }

  • unknown: 元素的高度height值width值

    .container {
    position: relative;
    }
    .content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

  • flexbox

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

浏览器兼容性

主要考虑IE浏览器，其他现代浏览器支持较好（chrome、firefox）

Method IE
text-align IE3+
vertical-aglign IE4+
line-height IE4+
table-cell IE8+
position IE9+
flexbox IE11

如何选择最优方案

  • 如果不用考虑兼容性的话，使用flexbox代码最简洁
  • 考虑兼容性的话，margin,padding,text-align,vertical-align，line-height > table-cell > positon > flexbox，再结合具体需求选择最合适的方案，代码越清晰简洁越好。
  • 通过上面的方案可知，这些属性很多时候都是配合着使用的,从而得到兼容性更好的方法，具体可见于 HOW TO CENTER IN CSS

参考资料

posted @ 2017-07-27 22:32  花森煜米  阅读(347)  评论(0)    收藏  举报