你不知道的 CSS 居中方案 水平居中 内联元素 Flexbox CSS Grid 块元素 Auto Margin Flexbox CSS定位 垂直居中 内联元素 Vertical Align Flexbox 块元素 绝对定位 CSS Grid 水平垂直居中 内联元素 其他元素类型 绝对定位 Flexbox CSS Grid
内联元素
要使内联元素(如链接,span 或img)居中,使用 text-align: center 足够了。
<div class="desk">
<span class="plate"></span>
</div>
.desk {
text-align: center;
}
对于多个内联元素,也可以使用text-align:center:
<div class="desk">
<span class="plate"></span>
<span class="plate"></span>
</div>
.desk {
text-align: center;
}
Flexbox
使用 flexbox 也可以快速居中元素:
.desk {
display: flex;
justify-content: center;
}
对于多个内联的项目,也可以正常工作:
CSS Grid
使用网格容器时,图中的盘子将根据其网格区域居中。请注意,除非将它们包裹在一个元素中,否则这将不适用于多个盘子。
.desk {
display: grid;
justify-content: center;
}
块元素
Auto Margin
宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素。
.plate {
120px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
对于多个块元素,它们应该包装在一个元素中,然后让这个父元素居中。
.tray {
display: flex;
margin-left: auto;
margin-right: auto;
}
Flexbox
对于 flexbox 同样也是使用 justify-content:center 来居中元素:
.desk {
display: flex;
justify-content: center;
}
对于多个元素,我们不需要将它们包裹在一个元素中,flexbox 可以将它们都居中。
CSS定位
通过绝对定位,我们可以轻松地通过CSS transform将其水平居中。
.plate {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
在已知元素宽度的情况下,可以使用负边距代替CSS transform。
.plate {
position: absolute;
left: 50%;
margin-left: -60px;
}
垂直居中
内联元素
Vertical Padding
垂直居中元素最简单的方法之一是使用padding:
padding-top: 24px;
padding-bottom: 24px;
}
Vertical Align
vertical-align属性可用于一个或多个元素。
在此示例中,叉子和刀子应与桌子垂直居中。
.desk {
text-align: center;
}
.plate,
.fork,
.knife {
vertical-align: middle;
}
Flexbox
为了对齐盘子,叉子和刀,我们可以使用 flexbox:
.desk {
display: flex;
justify-content: center;
align-items: center;
}
块元素
绝对定位
通过绝对定位元素,可以使用 CSS transform将元素垂直居中:
.plate {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
如果知道元素高度,则可以使用负边距代替transform。
.plate {
position: absolute;
top: 50%;
margin-top: -60px;
}
CSS Grid
使用CSS网格,我们可以使用align-items将项目垂直于其网格区域居中。
.desk {
display: grid;
align-items: center;
}
水平垂直居中
内联元素
Padding 和Text Align
.plate {
text-align: center;
padding-top: 24px;
padding-bottom: 24px;
}
其他元素类型
绝对定位
.plate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Flexbox
通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中:
.plate {
display: flex;
justify-content: center;
align-items: center;
}
CSS Grid
通过place-items属性就可以通过,它结合了justify-content和align-items:
.desk {
display: grid;
place-items: center;
}