水平居中与垂直居中：无忧搞定网页元素对齐
2023-11-12 23:16:52
水平居中和垂直居中是网页布局中经常遇到的需求，它们可以帮助我们让网页元素在页面中更显美观。CSS提供了多种方法来实现水平居中和垂直居中，本文将介绍八种常见的水平居中方法和八种常见的垂直居中方法，并提供详细的步骤和示例代码，帮助您轻松实现网页元素的对齐。
一、水平居中（八种方法）
- 1.1 行内元素——方法一
对于行内元素，可以使用text-align: center;来实现水平居中。
HTML代码：
<p>这是一个行内元素。</p>
CSS代码：
p {
text-align: center;
}
- 1.2 块级元素
块级元素的水平居中可以分为一般情况和子元素含有float属性的情况。
2.1 一般情况——方法二
对于一般情况，可以使用margin: 0 auto;来实现水平居中。
HTML代码：
<div>这是一个块级元素。</div>
CSS代码：
div {
margin: 0 auto;
}
2.2 子元素含有float属性——方法三
如果块级元素的子元素含有float属性，则可以使用text-align: center;来实现水平居中。
HTML代码：
<div>
<img src="image.png" style="float: left;">
<p>这是一个块级元素。</p>
</div>
CSS代码：
div {
text-align: center;
}
- 1.3 使用
flexbox——方法四
flexbox可以轻松实现水平居中，只需要将父元素设置为display: flex;，并将子元素设置为justify-content: center;即可。
HTML代码：
<div class="flex-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.flex-container {
display: flex;
}
.flex-container > div {
justify-content: center;
}
- 1.4 使用
grid——方法五
grid也可以轻松实现水平居中，只需要将父元素设置为display: grid;，并将子元素设置为justify-content: center;即可。
HTML代码：
<div class="grid-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.grid-container {
display: grid;
}
.grid-container > div {
justify-content: center;
}
- 1.5 使用
table——方法六
table也可以实现水平居中，只需要将父元素设置为display: table;，并将子元素设置为text-align: center;即可。
HTML代码：
<table class="table-container">
<tr>
<td>这是一个块级元素。</td>
</tr>
</table>
CSS代码：
.table-container {
display: table;
}
.table-container > tr > td {
text-align: center;
}
- 1.6 使用
absolute——方法七
absolute也可以实现水平居中，只需要将父元素设置为position: relative;，并将子元素设置为position: absolute; left: 50%; transform: translate(-50%, 0);即可。
HTML代码：
<div class="relative-container">
<div class="absolute-element">这是一个块级元素。</div>
</div>
CSS代码：
.relative-container {
position: relative;
}
.absolute-element {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
- 1.7 使用
calc——方法八
calc也可以实现水平居中，只需要将父元素设置为width: 100%;，并将子元素设置为margin: 0 auto; width: calc(100% - 20px);即可。
HTML代码：
<div class="calc-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.calc-container {
width: 100%;
}
.calc-container > div {
margin: 0 auto;
width: calc(100% - 20px);
}
二、垂直居中（八种方法）
- 2.1 使用
line-height——方法一
对于行内元素，可以使用line-height来实现垂直居中。
HTML代码：
<p>这是一个行内元素。</p>
CSS代码：
p {
line-height: 1.5em;
}
- 2.2 使用
vertical-align——方法二
对于块级元素，可以使用vertical-align来实现垂直居中。
HTML代码：
<div>这是一个块级元素。</div>
CSS代码：
div {
vertical-align: middle;
}
- 2.3 使用
flexbox——方法三
flexbox也可以轻松实现垂直居中，只需要将父元素设置为display: flex;，并将子元素设置为align-items: center;即可。
HTML代码：
<div class="flex-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.flex-container {
display: flex;
}
.flex-container > div {
align-items: center;
}
- 2.4 使用
grid——方法四
grid也可以轻松实现垂直居中，只需要将父元素设置为display: grid;，并将子元素设置为align-items: center;即可。
HTML代码：
<div class="grid-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.grid-container {
display: grid;
}
.grid-container > div {
align-items: center;
}
- 2.5 使用
table——方法五
table也可以实现垂直居中，只需要将父元素设置为display: table;，并将子元素设置为vertical-align: middle;即可。
HTML代码：
<table class="table-container">
<tr>
<td>这是一个块级元素。</td>
</tr>
</table>
CSS代码：
.table-container {
display: table;
}
.table-container > tr > td {
vertical-align: middle;
}
- 2.6 使用
absolute——方法六
absolute也可以实现垂直居中，只需要将父元素设置为position: relative;，并将子元素设置为position: absolute; top: 50%; transform: translate(0, -50%);即可。
HTML代码：
<div class="relative-container">
<div class="absolute-element">这是一个块级元素。</div>
</div>
CSS代码：
.relative-container {
position: relative;
}
.absolute-element {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
- 2.7 使用
calc——方法七
calc也可以实现垂直居中，只需要将父元素设置为height: 100%;，并将子元素设置为margin: 0 auto; height: calc(100% - 20px);即可。
HTML代码：
<div class="calc-container">
<div>这是一个块级元素。</div>
</div>
CSS代码：
.calc-container {
height: 100%;
}
.calc-container > div {
margin: 0 auto;
height: calc(1
