align-content: center
、align-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-content: center
、justify-items: center
:前者把 flex box 中的所有内容(即 content)当作一个整体,放在 main 线的中间,后者不适用于 flex box,所以用在 flex box 中无效,它通常用在 grid box 中。
如果一个子元素的 width 大于其父元素的 width,如何把子元素水平居中在父元素中呢?方法是把父元素变成一个 flex container 并使用 justify-content: center
,然后在子元素使用 flex-shrink: 0
。
上面提到的 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>
place-items
和 place-content
分别是 justify-items
& align-items
和 justify-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>
<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: relative
,然后在子元素使用:
.center-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在 transform: translate()
中使用的百分比是相对元素自身 width、height 的百分比,而 top
、left
都是相对父元素 width、height 的百分比,这几个百分比结合起来的意思是:
于是子元素就把自己给居中了。
关于百分比在 CSS 的意思,可以看这篇文章:《What does 100% mean in CSS?》
这个 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 元素。
参考资料: