将两个元素对齐在完美的中间答案

【问题标题】：Aligning two elements in perfect middle将两个元素对齐在完美的中间
【发布时间】：2017-08-16 22:18:15
【问题描述】：

我是 CSS 新手，并且一直在学习它。

我似乎无法弄清楚如何使 Div 中的 2 个元素完美地垂直对齐。我已经阅读了很多很多文章，但我仍然无法理解我做错了什么。

我已附上我的代码 - 在我的学习之旅中，您的帮助会很大。

谢谢！

h1 {
  color: green;
}

* {
  font-family: 'Roboto', sans-serif;
}


}
.center {}
.container1 {
  width: auto;
  display: flex;
  padding: 10px;
  height: auto;
}
.box-1 {
  padding: 10px;
  margin: 2px;
  border: 2px solid;
  display: flex;
  flex: 33%;
}
.box-2 {
  border: 2px solid;
  margin: 2px;
  display: flex;
  order: 1;
  flex: 33%;
}
.box-3 {
  margin: 2px;
  border: 2px solid;
  display: flex;
  order: 2;
  flex: 33%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container1">
    <div class="box-1">
      <div class="center">
        <h1>I am box number 1</h1>
        <img src="https://placekitten.com/g/400/303" alt="Cute pupies">
      </div>

    </div>
    <div class="box-2">
      <h1>I am box number 2</h1>
    </div>

    <div class="box-3">
      <h2>I am box number 3</h2>
    </div>

  </div>


</body>

</html>

【问题讨论】：

预期输出是什么

标签： html css flexbox

【解决方案1】：

要垂直对齐框的内容，您需要在其 CSS 中添加 align-items: center。

【讨论】：

【解决方案2】：

试试flex-direction: column;，它会让它们重叠出现。

h1 {
  color: green;
}

* {
  font-family: 'Roboto', sans-serif;
}


}
.center {}
.container1 {
  width: auto;
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: auto;
}
.box-1 {
  padding: 10px;
  margin: 2px;
  border: 2px solid;
  display: flex;
  flex: 33%;
}
.box-2 {
  border: 2px solid;
  margin: 2px;
  display: flex;
  order: 1;
  flex: 33%;
}
.box-3 {
  margin: 2px;
  border: 2px solid;
  display: flex;
  order: 2;
  flex: 33%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container1">
    <div class="box-1">
      <div class="center">
        <h1>I am box number 1</h1>
        <img src="https://placekitten.com/g/400/303" alt="Cute pupies">
      </div>

    </div>
    <div class="box-2">
      <h1>I am box number 2</h1>
    </div>

    <div class="box-3">
      <h2>I am box number 3</h2>
    </div>

  </div>


</body>

</html>

【讨论】：

【解决方案3】：

对于您的主 div 块，此处为 .container1，将 display 属性设置为 block。它会工作的！

.container1 {
    width: auto;
    display: block;
    flex-direction: column;
    padding: 10px;
    height: auto; }

【讨论】：