如何将 div 与父 div 对齐？答案

【问题标题】：How to align div to parent div?如何将 div 与父 div 对齐？
【发布时间】：2021-05-03 10:57:27
【问题描述】：

假设我们有 4 次潜水。第一个 div 是外部 div。我想创建一个 HTML 第二个 div 大小首先为 50%，并位于第一个 div 的中间底部。第三个 div 大小为 50% 秒，位于第二个 div 的中间左侧。第四个 div 的大小为第三个 div 的 50% 并且位于第三个 div 的中间顶部。

我该怎么做？

【问题讨论】：

你尝试过什么，你的基本 HTML 和 CSS 是什么？
@G-Cyrillus 有时我们需要测试编程语言的能力。这是创建我的课程的测试。

标签： html css alignment vertical-alignment

【解决方案1】：

您可以使用下面的 CSS flexbox。下面有四个 div，您可以更改第一个 div 的大小。然后其他人会自动对齐并调整自己的大小。

HTML 文件：


<html>
<body>
  <div id="first">
    <div id="second">
      <div id="third">
        <div id="fourth">
         <p>Text</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS 文件：

* {
    margin: 0;
    padding: 0;
}

#first {
    background: #ed1c24;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: auto;
}

#second {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #22b14c;
    width: 50%;
    height: 50%;
    margin: 0 auto;
}

#third {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    background: #ffaec9;
    width: 50%;
    height: 50%;
}

#fourth {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00a3e9;
    width: 50%;
    height: 50%;
}

点击查看这几行代码的结果： Result

【讨论】：

【解决方案2】：

我们可以通过使用 CSS Flexbox 和 Margin 属性来实现这一点。

index.html

<body>
    <div class="firstdiv">
        <div class="seconddiv">
            <div class="thirddiv">
                <div class="fourthdiv">
                </div>
            </div>
        </div>
    </div>
</body>

styles.css

div {
    display: flex;
}

.firstdiv {
  background-color: red;
  width: 600px;
  height: 600px;
}

.seconddiv {
  background-color: green;
  width: 50%;
  height: 50%;
  margin: auto;
  margin-bottom: 0;
}

.thirddiv {
  background-color: pink;
  width: 50%;
  height: 50%;
  margin: auto;
  margin-left: 0;
}

.fourthdiv {
  background-color: blue;
  width: 50%;
  height: 50%;
  margin: auto;
  margin-top: 0;
}

【讨论】：

【解决方案3】：

您也可以使用flex（或网格）和margin 代替位置：

div {
  display: flex;
}

body>div {
  /* sizing : whatever you want to start from */
  height: 90vmin;
  width: 90vmin;
  background: #ed1c24;
}

div div {
  height: 50%;
  width: 50%;
}

div div {
  background: #22b14c;
  margin: auto auto 0;
}

div div div {
  background: #ffaec9;
  margin: auto auto auto 0;
}

div div div div {
  background: #00a2e8;
  margin: 0 auto auto;
}


/* center the demo */

html {
  display: flex;
  height: 100vh;
}

body {
  margin: auto;
}

<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

这是您想要的输出吗？它是使用 position、top 和 bottom 和 translate 制作的，以确保它居中正确。

.div1 div { /* makes every small div 50% the size of the previous */
    width: 50%;
    height: 50%;
}
.div1 {
    width: 200px;
    height: 200px;
    background-color: red;
}
.div2 {
    background-color: green;
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}
.div3 {
    background-color: pink;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}
.div4 {
    background-color: lightblue;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

<div class="div1">
    <div class="div2">
        <div class="div3">
            <div class="div4">
                
            </div>
        </div>
    </div>
</div>

【讨论】：