CSS - Display:block 默认放置

Question

我是编程世界的新手，正在自学。我已经能够创建 2 个基本网站模型，但在第 3 个网站模型中我遇到了以前从未遇到过的问题。

我只是想将容器

Div

与页面中心对齐，但它拒绝这样做，当使用 Chrome 的检查工具时，它显示

display:block

正在阻止对齐项目。我不知道那个块是从哪里来的。

HTML 看起来像这样：

<div id="main-container">
        <div id="upper-text">
            Hello
        </div>

        <div id="lower-text">
            <div class="subcontainer">
                <div class=text>Lom ipsum dolo</div>
            </div>

            <div class="subcontainer">
                <div class=text>Lom ipsum dolo</div>
            </div>
    </div>

</div>```

CSS: 

#main-container{
    max-width: 980px;
    margin: 0 auto;
    align-items: center;

}




I searched on the internet but couldn't find a related issue. Maybe in too newbie for that. 

The code for the current site I'm working in is way longer and this section is the first one presenting this issue. I opened a clean VS Studio file and wrote only the code I'm posting here, with the same results. 

Answer 1

“显示”属性默认为“阻止”。要将块与“display: block”居中，您可以将侧边距的“margin”属性设置为“auto”。

“align-items”属性与“flex”值中的“display”属性结合使用。 “flex”是为父块设置的，“align-items”会影响子块。详细了解如何使用 Flexbox，例如，在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/