前端必知必会-CSS 布局水平和垂直对齐

---

CSS 布局 - 水平和垂直对齐

居中对齐元素

要水平居中块元素（如 <div>），请使用 margin: auto;

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占据指定的宽度，剩余空间将在两个边距之间平均分配：

此 div 元素居中。
示例

.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

注意：如果未设置 width 属性（或设置为 100%），则居中对齐无效。

居中对齐文本

要仅将元素内的文本居中，请使用 text-align: center;

示例

.center {
text-align: center;
border: 3px solid green;
}

居中图像

要居中图像，请将左右边距设置为自动，并将其设为块元素：

示例

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

左右对齐 - 使用位置

对齐元素的一种方法是使用 position: absolute;:

示例

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

注意：绝对定位元素会从正常流中移除，并且可以与元素重叠。

左对齐和右对齐 - 使用浮动

对齐元素的另一种方法是使用浮动属性：

示例

.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

clearfix 技巧

注意：如果元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用“clearfix 技巧”来修复此问题（参见下面的示例）。

然后我们可以将 clearfix 技巧添加到包含元素以解决此问题：

示例

.clearfix::after {
content: "";
clear: both;
display: table;
}

垂直居中 - 使用填充

在 CSS 中，有很多方法可以将元素垂直居中。一个简单的解决方案是使用顶部和底部填充：

示例

.center {
padding: 70px 0;
border: 3px solid green;
}

要垂直和水平居中，请使用 padding 和 text-align: center:

示例

.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

垂直居中 - 使用 line-height

另一个技巧是使用 line-height 属性，其值等于 height 属性：

示例

.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* 如果文本有多行，请添加以下内容：*/
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

垂直居中 - 使用 position 和 transform

如果 padding 和 line-height 不是选项，另一个解决方案是使用定位和 transform 属性：

示例

.center {
height: 200px;
position:relative;
border: 3px solid green;
}

.center p {
margin: 0;
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}

提示：您将在我们的 2D Transforms 章节中了解有关 transform 属性的更多信息。

垂直居中 - 使用 Flexbox

您还可以使用 Flexbox 来居中。请注意，IE10 及更早版本不支持 Flexbox：

示例

.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}

---

总结

本文介绍了的CSS 布局水平和垂直对齐使用，如有问题欢迎私信和评论