在 CSS 中垂直对齐和定位父 DIV

Posted 2023-03-05

【中文标题】在 CSS 中垂直对齐和定位父 DIV

【英文标题】：Vertically Aligning and Positioning Parent DIVs in CSS

【发布时间】：2022-01-15 20:21:18

【问题描述】：

我对编码还很陌生。当我遇到问题时，我正在制作一个 JS 项目。我需要垂直对齐 2 个父 div。这两个父 div 在它们下面有几个 div。因此，为了垂直对齐整个页面，我需要设置这些父 div 的样式。请帮助我这样做。如果您知道我的问题的解决方案，请教我如何移动我的 div。

这是 CSS 代码。 （如果想看JS和html代码，这里是js小提琴链接：https://jsfiddle.net/y924rv7g/）

body 
    background-image: url(Background.jpeg)



/* AGE IN DAYS */
.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】：

在向 Stack Overflow 发布问题时，请尽量减少示例代码，以便我们只关注必要的部分 :) 不确定您到底想做什么 - 您期望什么以及如何对齐？对于一维样式，请查看flexbox，对于二维样式grid。我建议您通过其中一个链接（在您的情况下可能是 flexbox）并彻底阅读它们，您的答案很可能在那里:)

【讨论】：

感谢您的帮助。我想通了。