css 对内容进行居中的几种方法

作者: 科技微讯

日期:

flex box 居中

align

align-content: centeralign-items: center. 当设置 display:flex; flex-direction: row 时, 中点是这个 element 的中心, main 线是水平线, cross 线是垂直于 main 线的线.

align-content 把 flex box 中的所有内容 (content) 作为一个整体, 把它上下居中显示在穿过中心的 cross 线上, 它只有当这个 flex box 同时设置了 flex-wrap: wrap 才有效.

align-items 是把 flex 元素中的每一个一级子元素分别当作一个元素 (item), 把这些元素 (items) 居中显示在其所在的 cross 线上.

justify

justify-content: centerjustify-items: center, 前者把 flex box 中的所有内容 (content) 当作一个整体, 放在 main 线的中间, 后者不适用于 flex box, 所以用在 flex box 中无效, 它通常用在 grid box 中.

auto margin

上面提到的 align- 和 justify 都是作用在 flex box 这个元素中, 如果不在 flex box 元素使用这些 css 属性, 也可以在 flex box 中的子元素使用 auto margin 以实现一样的效果.

<html>
  <head>
    <style>
      .parent {
        border: 1px solid black;
        width: 500px;
        height: 300px;
        display: flex;
      }
      .child {
        margin: auto;
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

center

place

place-itemsplace-content 分别是 justify-items & align-itemsjustify-content & align-content 的 shorthand. 所以如果 place-content 用在 flex box 中, 并希望实现 align-content 的作用, 需要在 flex box 使用 flex-wrap: wrap.

<html>
  <head>
    <style>
      .parent {
        border: 1px solid black;
        width: 500px;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        place-content: center;
      }
      .child {
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

grid box 居中

<html>
  <head>
    <style>
      .parent {
        border: 1px solid black;
        width: 500px;
        height: 300px;
        display: grid;
        place-items: center;
      }
      .child {
        background-color: pink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

其他

position: absolute

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

vertical-align

这个 css 属性用在需要居中显示的那个元素中, 而不是其父元素, 但要注意父元素的 line-height, 默认情况下 line-height 的值是 normal, vertical-align 的作用是在父元素的 line-height 中上下居中, 如果 line-height 等于需要居中的元素的高度, 会看不到效果.

normal 的意思是:

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.


参考资料: 10 modern layouts in 1 line of CSS