二维码
搜索 ×

CSS 布局 - 水平和垂直对齐

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 布局 - 水平和垂直对齐

居中对齐元素

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

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

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

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

注意： 如果未设置width属性，则中心对齐不起作用 。

文本居中对齐

要使文本居中对齐，请使用text-align: center;

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

提示： 有关如何对齐文本的更多示例，请参阅 CSS 文本章节。

将图像居中

要使图像居中，请设置图片的左边距和右边距，并将图片设置为display: block。

1
2
3
4
img {  display: block;  
  margin-left: auto;  
  margin-right: auto;  
  width: 40%;}

左右对齐-使用position: absolute

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

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

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

左右对齐 - 使用float

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

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

clearfix

注意： 如果一个元素比包含它的元素高，并且它是浮动的，则它会溢出到其容器外。您可以使用“clearfix hack”来解决这个问题（请参阅下面的示例）。

然后我们可以将 clearfix hack 添加到包含元素进行修复这个问题：

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

垂直居中 - 使用填充

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

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

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

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

垂直居中 - 使用行高

另一个技巧是使用值相等的属性：line-height和height

1
2
3
4
5
6
7
8
9
.center {  line-height: 200px;  
  height: 200px;  
  border: 3px solid green;  
  text-align: center;}  

/* If the text has multiple lines, add the following: */  
.center p {  line-height: 1.5;  
  display: inline-block;  
  vertical-align: middle;}

垂直居中 - 使用位置和变换

使用 padding、line-height 和 transform。

1
2
3
4
5
6
7
8
9
.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更早版本不支持 ：

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

提示： 您将在我们的 CSS Flexbox 章节中了解有关 [Flexbox] 的更多信息。

推荐教程