logo科技微讯

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

作者:科技微讯
日期:2020-08-04
📜 文章

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),把这些元素居中显示在其所在的 cross 线上。

justify

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

如果一个子元素的 width 大于其父元素的 width,如何把子元素水平居中在父元素中呢?方法是把父元素变成一个 flex container 并使用 justify-content: center,然后在子元素使用 flex-shrink: 0

margin: auto

上面提到的 align- 和 justify- 都是作用在 flex box 这个 container 中,另一个让 container 中的子元素居中的方法,是把 align- 和 justify- 从 container 中删除,然后在子元素中添加 margin: auto

当子元素的长或宽比 container 大时,在 container 使用 align- 和 justify- 可能会让子元素显示不全,margin: auto 可解决这个问题

<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

在父元素使用 position: relative,然后在子元素使用:

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

transform: translate() 中使用的百分比是相对元素自身 width、height 的百分比,而 topleft 都是相对父元素 width、height 的百分比,这几个百分比结合起来的意思是:

  • 子元素顶部放在父元素中间的位置;
  • 子元素最左边放在父元素中间的位置;
  • 子元素往上挪自身高度的 50%;
  • 子元素往左挪自身宽度的 50%;

于是子元素就把自己给居中了。

关于百分比在 CSS 的意思,可以看这篇文章:《What does 100% mean in CSS?

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.

注意 vertical-align 只能应用于 inline 元素、inline-box 元素、 table-cell 元素。


参考资料:

donation赞赏
thumbsup0
thumbsdown0
暂无评论