[分享]css两个水平块 居中

CSS是网页设计中不可或缺的一部分，掌握好CSS的属性和用法可以使我们的网页在视觉上更加美观、易读。在本文中，我们将介绍如何使用CSS将两个水平块居中。首先，我们需要构建两个水平块。在HTML中，我们...

CSS是网页设计中不可或缺的一部分，掌握好CSS的属性和用法可以使我们的网页在视觉上更加美观、易读。在本文中，我们将介绍如何使用CSS将两个水平块居中。

首先，我们需要构建两个水平块。在HTML中，我们可以使用div标签来创建块级元素。以下是HTML代码：

<div class="block-1">
  <p>这是第一个块</p>
</div>

<div class="block-2">
  <p>这是第二个块</p>
</div> 

现在，我们需要使用CSS将这两个块居中。以下是CSS代码：

.block-1, .block-2 {
  width: 200px;
  height: 100px;
  background-color: #eee;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
} 

通过CSS的属性，我们将两个块设置为相同的宽度和高度，并将它们的背景色设置为灰色。接下来，我们将它们的display属性设置为flex，这将使我们可以轻松地将块水平和垂直居中。

我们将使用justify-content属性将块水平居中。该属性可接受以下值：

• flex-start：将块靠左对齐
• flex-end：将块靠右对齐
• center：将块居中对齐
• space-between：在块之间均匀分配空间
• space-around：在块周围均匀分配空间

在我们的示例中，我们选择了center来将块水平居中。

我们将使用align-items属性将块垂直居中。该属性也可接受以上相同的值，但方向是垂直的。

现在，我们的两个块已经成功地水平和垂直居中了！可以尝试更改CSS代码中的属性和值，以查看它们的不同效果，加深对CSS的理解。