如何使 2 个 div 元素在 CSS 中水平和垂直居中？答案

【问题标题】：How to make 2 div elements centered horizontally and vertically in CSS?如何使 2 个 div 元素在 CSS 中水平和垂直居中？
【发布时间】：2022-01-28 18:10:09
【问题描述】：

我正在尝试将 2 个 div 元素垂直和水平居中，这应该可以很好地工作，而且通常可以，但不是在这里..

HTML

<div class="contact">
                    <h3>WHAT ARE YOU WAITING FOR?</h3>
                    <div class="cta-btn">
                        <a href="../contact-us/contact.html"><h3>CONTACT US</h3></a>
                    </div>
                </div>

CSS

.contact {
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .cta-btn {
        width: 8em;
        padding: 0.2em;
        border-radius: 2em;
    }
}

【问题讨论】：

请添加更多代码来显示问题。尤其是相关的 HTML 部分和带有文本“你在等什么？”的元素的 CSS
您希望元素像图像一样排成一行还是堆叠成一列？请更清楚，因为在实际状态下，问题是不可重现的......
你应该为链接应用边界半径，而不是为 div .cta-btn

标签： css flexbox

【解决方案1】：

有（至少）两种方法可以实现您的目标。一种是使用弹性盒。在这里，您需要一个初始容器来使用您的整个窗口，然后在该容器中放置另一个位于中心的容器，您可以将内容放入其中（代码已缩短到最少）：

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexcontainer {}

<div class="box">
  <div class="flexcontainer">
    <span class="left">Left Content</span>
    <span class="right">Right Content</span>
  </div>
</div>

[编辑]：显然，初始容器（此处为.box）也可以是标题或不跨越整个窗口高度的东西。在这种情况下，您不必将其绝对定位并定义顶部、底部、左侧和右侧位置，但可以使用宽度和高度或使用动态大小。[/edit]

另一种方法是假设您知道内容容器的高度：

.container {
  width: 500px;
  height: 200px;
  margin: calc(50vh - 101px) auto;
  /* calc(50 percent of window height minus half the size of the container including borders!) */
  border: 1px solid #000;
}

&lt;div class="container"&gt;Content&lt;/div&gt;

【讨论】：

【解决方案2】：

更正此代码，在 css 中添加以下属性：

<div class="contact">
    <h3>WHAT ARE YOU WAITING FOR?</h3>
    <div class="cta-btn">
        <a href="../contact-us/contact.html"><h3>CONTACT US</h3></a>
    </div>
</div>

.contact {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
        flex-shrink: 0;
    }

    .cta-btn {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }
}

【讨论】：

【解决方案3】：

.contact{
display:flex;
align:center;
}
.cta-btn{
display:flex;
align:center;
}

<div class="contact">
                    <h3>WHAT ARE YOU WAITING FOR?</h3>
                    <div class="cta-btn">
                        <a href="../contact-us/contact.html"><h3>CONTACT US</h3></a>
                    </div>
                </div>

【讨论】：

请添加对您发布的代码的说明。