如何在 CSS 中垂直定位 DIV 元素

Posted 2023-03-05

【中文标题】如何在 CSS 中垂直定位 DIV 元素

【英文标题】：How to Vertically Position DIV Elements in CSS

【发布时间】：2022-01-16 04:35:50

【问题描述】：

在 CSS 中定位我的内容时遇到问题。我想获取我的内容并垂直放置它。我尝试过使用 flexbox，但它没有用。我知道 flexbox 是什么以及它的属性，但它对我不起作用。这是 CSS 和 html 代码。

HTML：

<div class="main-div">
    <div class="container-1">
    
        <h2>What is Your Age In Days?</h2>
        <div class="flex-box-container-1">
            <div>
                <button class="btn btn-primary" onclick="ageInDays()">Click Me!</button>
            </div>
            <div>
                <button class="btn btn-danger" onclick="reset()">Try Again</button> 
            </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result"></div>
        </div>

    </div>


    <div class="container-2">
        <h2>Generator</h2>
        <button class="btn btn-success" id="picture-generator" onclick=pictureGenerator()>GENERATE</button>

        <div class="flex-box-container-2" id="picture-gen">
        </div>

    </div>
</div>

CSS：

body 
    background-image: url(Background.jpeg)



.container-1, .container-2 
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    width: 75%;


.flex-box-container-1, .flex-box-container-2 
    display: flex;
    padding: 10px;
    border: 1px solid black;    
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;


.flex-box-container-1 div 
    padding: 10px;
    align-items: center;
    display: flex;


#flex-box-result 
    font-size: 32px;
    font-weight: bold;



#yikes 
    font-size: 32px;
    font-weight: bold;
    Animation-name: example;
    Animation-duration: 0.5s;
    animation-iteration-count: infinite;;


@keyframes example 
    10% color: red;
    15% color: yellow;
    20% color: blue;
    30% color: green;
    40% color: lightsalmon;
    50% color: lightsteelblue
    60% color: steelblue
    70% color: ivory
    80% color: purple
    90% color: pink
    100% color: magenta;
    



.flex-box-container-2 img 
    box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
    margin: 10px;

所以，我必须垂直对齐容器 1 和 2。我尝试使用 Justify Content 和 Align Items 来做到这一点，但没有成功。我感谢每一点帮助。

【问题讨论】：

我不太清楚你的目标是什么。容器 1 和容器 2 是否彼此相邻？以及在什么意义上垂直对齐（中心对齐或顶部或..）。

容器 1 和 2 彼此相邻。我想将它们垂直居中。如果想看代码输出，这里是js小提琴链接：jsfiddle.net/y924rv7g

这能回答你的问题吗？ Vertically center elements in a div

不，它没有。我试过使用 flexbox 和它的属性，但它们对我不起作用。

要对齐哪些元素？我了解您希望 container-1 和 container-2 彼此相邻，但是您希望它们各自内容的哪些位彼此对齐？标题和/或按钮？

【参考方案1】：

您可以使用flex-direction: column 垂直定位它。

【讨论】：

我的意思是垂直对齐它。我需要上下移动它。

您可以尝试将 Justify-Content 和 Align Items 设置为居中

是的，我试过了。它没有用。想自己看的话，可以看js fiddle上的代码，jsfiddle.net/y924rv7g

【参考方案2】：

如果 Flex 不适合您，据我所知，还有另外两种方法。

第一个是在父元素上使用display: table; width: 100%;，在要垂直对齐的子元素上使用display: table-cell; vertical-align: middle;。

第二个涉及在父元素上使用position: relative，在子元素上使用position: absolute; top: 50%; transform: translateY(-50%);。

如果您想将 container-1 和 container-2 居中，一个在另一个之上，您必须创建另一个 div 包装了这两个。在这种情况下，这将是您的子元素。

如果您希望两个容器彼此相邻，请使用引导程序的网格系统为它们提供适当的 col 类，并将这两个容器视为子容器。

在上述两种情况下，你的父元素都应该是.main-div。

【讨论】：

非常感谢您的帮助，但我想坚持使用 flexbox。我更新了我的一些代码，你可以在这里看到它jsfiddle.net/21mL930y如果你找到解决方案请告诉我。