CSS 居中的各种方案
- 实现居中的样式分为容器 (
container
) 的样式和需要居中的元素 (item
) 的样式。 - 容器默认指一个块级元素。
- 各种方案都有其优缺点,根据实际需求选择。如果不考虑兼容性的话,优先选择用
flex
实现。
水平居中
- 行内或行内块元素
.container { text-align: center; }
- 单个块级元素
.item { margin: 0 auto; }
- 多个块级元素
-
inline-block
方案.container { text-align: center; } .item { display: inline-block; }
-
flex
方案.container { display: flex; justify-content: center; }
-
垂直居中
- 行内或行内块元素
- 单行
- 容器高度由元素撑开
.container { padding: 50px 0; }
- 容器高度固定并且已知
.container { height: 100px; line-height: 100px; }
- 容器高度由元素撑开
- 多行(要将多行内容包成一个元素)
-
table
方案.container { display: table; } .item { display: table-cell; vertical-align: middle; }
-
flex
方案(多行内容为文本时,可以不包成一个元素).container { display: flex; flex-direction: column; justify-content: center; }
- 伪元素方案
- 元素的宽度必须小于容器的宽度,否则会被挤到容器下面。
- 这是因为即使的空的伪元素,它跟它后面的行内元素或文本之间也会有空隙。
- 这个空隙的大小跟字体大小有关,当字体大小等于 0 时空隙消失。
- 所以这就导致后面元素在容器中可以占用的宽度变小了,于是当元素宽度等于容器宽度时,它就会被挤下去。
- 解决的方法就是将容器的
font-size
设置为 0,然后在元素中再将font-size
设置为所需的值。
.container { font-size: 0; } .container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .item { display: inline-block; vertical-align: middle; font-size: 16px; }
-
- 单行
- 单个块级元素
- 绝对定位方案
- 元素高度已知
.container { position: relative; } .item { position: absolute; top: 50%; height: 100px; margin-top: -50px; }
- 元素高度未知
.container { position: relative; } .item { position: absolute; top: 50%; transform: translateY(-50%); }
- 元素高度已知
-
flex
方案.container { display: flex; flex-direction: column; justify-content: center; }
- 绝对定位方案
同时水平和垂直居中
- 绝对定位方案
.container { position: relative; } .item { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.container { position: relative; } .item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.container { position: relative; } .item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; margin: auto; }
-
flex
方案.container { display: flex; justify-content: center; align-items: center; }
.container { display: flex; } .item { margin: auto; }
-
grid
方案.container { display: grid; } .item { margin: auto; }