块元素如何使用 CSS 居中？

在本文中，我们将看到如何使用 CSS 使块级元素居中。

方法：将块级元素居中有两个步骤 -

第 1 步：定义外部宽度——我们需要定义外部宽度。块级元素的默认宽度为网页的 100%，因此为了使块元素居中，我们需要在其周围留出空间。所以为了生成空间，我们给它一个宽度。

第 2 步：将元素的左边距和右边距设置为 auto –由于我们通过提供外部宽度产生了剩余空间，所以现在我们需要正确对齐该空间，这就是我们应该使用 margin 属性的原因。边距是一个属性，它告诉如何对齐剩余空间。因此，要使元素居中，您必须将左边距设置为自动，将右边距设置为自动。

句法：

element {
    width:200px;
    margin: auto;
}

下面的例子展示了如何使块级元素居中。

示例 1：这里单个元素 (div) 在主体内部居中。

HTML

    

    

    
    
      

        
this is a box
      

    

输出：

示例 2：这里我们通过给定外部高度和宽度，将两个元素一个接一个地居中。

HTML

    

    

    

    

        
this is a box1
    
    

        
this is a box2
    

    

输出：