在CSS中水平居中两个项目？答案

【问题标题】：Horizontally centering two items in CSS?在CSS中水平居中两个项目？
【发布时间】：2022-01-10 09:17:01
【问题描述】：

我尝试过使用text-align 和justify-content，但它们都拒绝工作。我想我在所有间距上都犯了一个错误。这是 HTML：

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
}

.contents1 {
    display: flex;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1>This website is awesome</h1>
                <p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

【问题讨论】：

预期输出是什么？
请说出你想要达到的目标

标签： html css flexbox

【解决方案1】：

将 justify-contents 和 align-items 放入类图像中

.container1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.image{
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
}

【讨论】：

【解决方案2】：

最好先添加一些背景颜色以更好地查看每个元素的位置，然后删除这些无用的颜色。对于有 display:flex 的容器，请添加

width:100%;

【讨论】：

【解决方案3】：

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 75%;
    margin: auto;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 75%
    height: 200px;
    margin: auto;
}

.contents1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1 class="center">This website is awesome</h1>
                <p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

假设您想将 container1 div 与图像占位符 div 居中，问题是您的 div 没有分配。将它们的宽度设置为小于父级的百分比，然后使用 CSS 属性 margin: auto。您还需要将 flex-direction: 列应用到您的父 div，contents1

【讨论】：

【解决方案4】：

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 400px;
    margin: auto;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
    margin: auto;
}

.contents1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1 class="center">This website is awesome</h1>
                <p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。