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

CSS是Web开发中不可或缺的一部分，常常用于实现页面布局和样式。其中，居中显示是Web开发中常用的一种布局方式。本文将介绍如何使用CSS实现两个水平块居中显示的效果。首先，我们需要准备两个水平块。下...

CSS是Web开发中不可或缺的一部分，常常用于实现页面布局和样式。其中，居中显示是Web开发中常用的一种布局方式。本文将介绍如何使用CSS实现两个水平块居中显示的效果。

首先，我们需要准备两个水平块。下面是示例代码：

 <div class="block black">Block 1</div>
  <div class="block white">Block 2</div> 

上面的代码中，我们创建了两个`div`元素，并分别加上了`class`属性，以便后续将它们居中显示。

接下来，请使用下面的CSS代码将两个水平块居中显示：

 .block {
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
  }
  
  .black {
    background-color: black;
  }
  
  .white {
    background-color: white;
  } 

上面的代码中，我们使用了`margin: auto`将两个水平块居中显示。此外，使用了`position: absolute`和`top, bottom, left, right`设置了水平块的位置，在页面中居中显示。最后，我们使用了两个`class`分别设置水平块的背景颜色。

经过上述步骤，我们已经成功实现了两个水平块居中显示的效果。其中，使用了CSS的布局和样式来完成。这种方式在Web开发中常常使用，是让网站页面更具美感的一种方式。