9.1 水平居中
元素居中 是网页设计的基本任务之一。它可以创造出美观且易于阅读的布局。下面我们来看一下使用现代CSS技术的水平和垂直居中方法。
1. 使用 margin: auto 居中块级元素
一个最简单的居中块级元素的方法是使用 margin: auto。
示例：
CSS
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
HTML
<div class="centered-box"></div>
代码解释：
margin: 0 auto;: 设置左侧和右侧自动边距，水平上居中元素
2. 使用 text-align 居中行内元素
以内联或行内元素为目标时，可以在父块级元素中使用 text-align: center。
示例：
CSS
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
HTML
<div class="container">
<div class="inline-element">行内元素</div>
</div>
代码解释：
text-align: center;: 使行内元素在块级容器中居中
3. 使用 Flexbox 居中元素
Flexbox 提供了一种灵活且简单的方式来在水平和垂直方向上居中元素。
示例：
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
代码解释：
display: flex;: 将容器设置为 Flexboxjustify-content: center;: 水平居中元素align-items: center;: 垂直居中元素（将在下文详细介绍）
9.2 垂直居中
1. 使用 Flexbox 居中
Flexbox 提供了一种简单的方法来垂直居中元素。
示例：
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
代码解释：
align-items: center;: 垂直居中元素
2. 使用 CSS Grid 居中
CSS Grid 提供了强大的元素居中能力：
CSS
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="grid-container">
<div class="centered-box"></div>
</div>
代码解释：
display: grid;: 将容器设置为 CSS Gridplace-items: center;: 在水平和垂直方向上居中元素
3. 使用绝对定位和 CSS 变换垂直居中
使用绝对定位和 CSS 变换可以垂直居中元素。
示例：
CSS
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="container">
<div class="centered-box"></div>
</div>
代码解释：
position: absolute;: 将元素相对于容器进行绝对定位top: 50%;,left: 50%;: 将元素移动到容器顶部和左侧的 50%transform: translate(-50%, -50%);: 将元素在自身宽度和高度的 50% 移动以实现居中
4. 使用表格和单元格垂直居中
使用表格和单元格来垂直居中元素。
示例：
CSS
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
HTML
<div class="table-container">
<div class="table-cell">
<div class="centered-box">居中元素</div>
</div>
</div>
代码解释：
.table-container: 创建一个显示为table的容器.table-cell: 创建一个垂直对齐为middle的表格单元格
GO TO FULL VERSION