“保证金：0自动；”和“宽度：50％”的组合不会使我的div居中

Question

尝试将其他div内的垂直和水平div居中时，我遇到一些问题。

这就是我想要做的：

我也阅读了How to horizontally center a <div>?和How to center a "position: absolute" element。

这两个问题都不是重复的，因为我不想将具有position:absolute的div居中。我想将没有position属性的div居于具有position:absolute的div内。

margin: 0 auto;和width:50% 不起作用。

对齐图像，文本和按钮分别需要不同的方法，我不知道。

这是我的代码：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(back-image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: hidden;
  background-color: gray;
}

html {
  min-height: 100%;
}

#container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

.top-container,
.center-container,
.side-container {
  position: absolute;
}

.top-container {
  left: 20%;
  top: 0;
  height: 30%;
  width: 50%;
  background: red;
  text-align: center;
}

.center-container {
  left: 20%;
  top: 40%;
  height: 50%;
  width: 50%;
  background: blue;
  text-align: center;
}

.side-container {
  left: 70%;
  top: 14%;
  height: 80%;
  width: 30%;
  background: green;
}

.top-container #logo {
  /* background: black;     */
  margin-top: 50px;
  width: 50%;
  height: 50px;
}


/* .top-container #logo img {
    display: inline-block;
} */

.top-container .title {
  margin-top: 50px;
  width: 100%;
  height: 40px;
  /* margin: 0 auto; */
  background: black;
  border-bottom: 1px solid red;
}

.center-container .title {
  /* margin: 0 auto; */
  background: greenyellow;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid red;
}

#text-box {
  color: white;
  margin: 0 auto;
  width: 100%;
  height: 50%;
  background: black;
}

.center-container #text-box {
  background: black;
  height: 100%;
}

#text-box p {
  margin: 10px 10px;
  padding: 5px;
  text-align: left;
}

#text-box span {
  color: cyan;
  margin: 10px;
  text-align: right;
}

.side-container .title {
  /* margin: 0 auto; */
  background: greenyellow;
  height: 40px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid red;
}

#settings-button {
  width: 50%;
  background: none;
  border: 2px solid red;
  color: white;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  margin: 0 auto;
  height: 40px;
}

<div id="container">
  <div class="top-container">
    <div id="logo"><img url="logo.png"></div>
    <div class="title">
      <h1>Home Page</h1>
    </div>
  </div>
  <div class="center-container">
    <div class="text-box">%PLACEHOLDER_1%</div>
  </div>
  <div class="side-container">
    <div id="text-box">
      <p>URL: %PLACEHOLDER_URL%</p>
      <p>URL Refresh Rate: %PLACEHOLDER_URR%</p>
      <p>Brightness: %PLACEHOLDER_Brightness%</p>
    </div>
    <input id="settings-button" type="submit" name="" value="Settings">
  </div>
</div>

这是结果：

有些问题我不知道如何解决：

• 无法使#logo内部的图像居中。
  其div具有background: black。它使用width:50%，并且很好地居于.top-container内部，但是img不在居中#logo div的中心。 我尝试过：this和this，但这只会使情况变得更糟。

• 无法将#settings-button放在.side-container内部。**与#logo相同。 .center-container .title和.side-container .title的行为就像在top= 5px中设置的一样。 为什么不将它们放在包装器div的开头：分别为.center-container和.side-container？

我将text align: center用在.title上，该文本仅水平居中。 要使文本也垂直居中需要做什么？

我将width:100%用于文本div，因为我不需要div居中。将width:更改为任何百分比仍可保持居中。

我尝试添加display:grid和flex和inline-block，但它们只会使情况变得更糟。

这是我所能做到的。

Answer 1

我试图修复您的代码示例，但是很难将问题的各个部分与您的代码示例相关联。相反，我会告诉您如何自行修复。

垂直居中非常棘手-除非您使用flexbox或CSS Grid。那就太容易了。老实说，如果您花大约30分钟摆弄flexbox，就会放下它-而且布局也很简单，而且很有意义，与浮动广告不同。

Bootstrap将整个平台从Bootstrap3重新分配到Bootstrap4的原因，主要是从使用浮动转换为flexbox。

Flexbox需要做两件事：

1. 父容器（例如DIV，剖面，侧面，p等）

2. 一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框 ：display:flex;

然后，有各种开关。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox。

观看本教程，从现在开始的40分钟内，您的问题将得到解决-并且您将了解flexbox。

_{P.S。我与该视频或其演示者没有任何联系-很幸运，我发现了它，现在将其传递了。}