为什么我的 div 不对齐？（CSS 网页设计布局）答案

【问题标题】：Why won't my div's align? (CSS web design layout)为什么我的 div 不对齐？（CSS 网页设计布局）
【发布时间】：2019-10-02 17:35:45
【问题描述】：

div 类容器用于包装网页的所有其他项目，我想将此容器居中对齐，但似乎无法弄清楚为什么它不起作用。

编辑：我希望容器本身以视点为中心，然后我想单独对齐它们自己容器中的项目。

编辑2：我已经弄清楚了，感谢大家的回复。我将 HTML 选择器更改为 body，然后将显示更改为 flex，最后将 justify-self 更改为 align-items。

* {
margin: 0;
padding: 0;
}

html {
display: block;
flex-direction: column;
width: 100%;
justify-self: center;
}

h1 {
text-align: center;
}

.sub {
position: absolute;
}

.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
display: inline-flex;
position: relative;
}

<!DOCTYPE html>
<html>
    <head>
        <link href='style.css' rel='stylesheet'>
        <link href="https://fonts.googleapis.com/css?family=Notable|Work+Sans&display=swap" rel="stylesheet">
    </head>
    <h1 id='main_title'>Website Style Specification - 1</h1>
    <body>
        <div class='container' id='color_container'>
            <h2 class='sub'>Colours</h2>
            <div class='color_box' id='color_one'>
                <p>Coal</p>
                <p>#252525</p>
                <p>Background Colour</p>
            </div>
            <div class='color_box' id='color_two'>
                <p>Blood</p>
                <p>#ff0000</p>
                <p>Text colour</p>
            </div>
            <div class='color_box' id='color_three'>
                <p>Crimson</p>
                <p>#af0404</p>
                <p>Borders ad foreground colouring</p>
            </div>
            <div class='color_box' id='color_four'>
                <p>Slate</p>
                <p>#414141</p>
                <p>Element background</p>
            </div>
        </div>
        <div class='container' id='font_container'>
            <h2 class='sub'>Fonts</h2>
            <div class='font_box' id='font_1'>
                <h3>Notable</h3>
                <p class='normal'>This is how the text will display on the website.</p>
                <p class='italic'>This is how the text will display on the website.</p>
                <p class='bold'>This is how the text will display on the website.</p>
            </div>
            <div class='font_box' id='font_2'>
                    <h3>WorkSans-Regular</h3>
                    <p class='normal'>This is how the text will display on the website.</p>
                    <p class='italic'>This is how the text will display on the website.</p>
                    <p class='bold'>This is how the text will display on the website.</p>
                </div>
        </div>
        <div class='container' id='text_styles'>
            <h2 class='sub'>Text styles</h2>
            <div class='text_box' id='text_1'>
                <h3 id='sub_headings'>This is a sub heading</h3>
                <ul>
                    <li>HTML: h2</li>
                    <li>font family: Notable</li>
                    <li>Font weight: 28px</li>
                    <li>Text decoration: underline</li>
                </ul>
            </div>
            <div class='text_box' id='text_2'>
                <p id='text'>
                    <ul>
                        <li>HTML: p</li>
                        <li>font family: Work sans</li>
                        <li>font weight: 18px</li>
                    </ul>
                </p>
            </div>
        </div>
    </body>
    <footer></footer>
</html>

【问题讨论】：

您能否更清楚地了解“它不起作用。”？您需要.container 以网页或其内容为中心吗？另外，添加一段 HTML 以便我们可以看到并以 minimal reproducible example 重现您的页面，这样会很好
你的 HTML 在哪里？
道歉，用 HTML 和更多细节编辑。

标签： css

【解决方案1】：

你在寻找这样的东西吗？

给containerdisplay: flex和justify-content: center;的父元素，让flexbox发挥它的魔力。这将使子元素在 X 轴上居中

* {
margin: 0;
padding: 0;
}

html {
display: block;
flex-direction: column;
width: 100%;
}

body{
width: 100%;
display: flex;
justify-content: center;

color: black;
}

h1 {
text-align: center;
}

.sub {
position: absolute;
}

.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
text-align: center;
}

<html>
<body>

<div class="container">
HELLO IM THE CONTAINER
</div>
</body>
</html>

【讨论】：

我已经尝试了您的建议，但它似乎只是对齐容器的内容，并且容器本身仍然位于左侧。
正如您在我的代码 sn-p 中看到的，容器居中。 body 应该有 display: flex; 和 width: 100% 以及 justify-content: center