css中怎样让div块居中显示

用CSS让div块居中显示，是Web设计中的一个基本需求。以下是一些方法，用于实现这个目标。 首先，让我们看看HTML代码中的div。我们将使用一个名为“center”的类来设置样式。

 <div class="center">
        <p>这是一个居中显示的 div 块。</p>
    </div> 

现在，我们可以使用CSS来设置“center”类的样式，使其在水平和垂直方向上居中显示在父元素中。 方法1： 使用display:flex和justify-content:center和align-items:center将div块居中。这是最简单的方法之一。

 .center {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

方法2： 设置div块的左右和上下外边距为auto，并将其设置为块级元素，以将其居中。

 .center {
        margin: auto;
        display: block;
    } 

方法3： 设置div块的左右外边距为auto，并对其内部元素设置一些样式取得居中效果。

 .center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .center p {
        display: inline-block;
        margin: 0;
        text-align: left;
    } 

这三种方法都可以让div块在其父元素中居中显示。选择哪种方法取决于你的需求和工作流程。