垂直对齐浮动div内部的元素，没有已知高度

I'm aware that there does exist solutions for vertical alignment but the issue is there are all sorts of ways to accomplish this but I haven't found one which deals with a flex container. And many solutions revolve around having a fixed height which doesn't help me at all since my height is always unknown.

我知道确实存在垂直对齐的解决方案，但问题是有各种方法来实现这一点，但我还没有找到一个处理flex容器的方法。许多解决方案都围绕着一个固定的高度，这对我来说根本没有帮助。

I would like to vertically align the element inside of my left floating div which is the .about_container .welcome div block. How can I figure this out, and feel free to point out any bad practices that I may have used in my code.

我想垂直对齐我的左浮动div内部的元素，即.about_container .welcome div块。我怎么能搞清楚这一点，并随意指出我在代码中使用的任何不良做法。

If you want to see what the output of the follow two files look like, I've added a screen shot of the output on the bottom.

如果你想看看下面两个文件的输出是什么样的，我在底部添加了输出的屏幕截图。

Contents of my HTML file

我的HTML文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Maddness</title>
    <link rel="stylesheet" type="text/css" href="floatHelp.css">
</head>
<body>
         <div class="about_container">
            <div class="welcome">
               <h1>Welcome<br>to my<br>Webpage!</h1>
            </div>
            <div class="welcome_content">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>
            </div>
         </div>
         <div id="projects">
            <h2>Some lonely text down here to test against overflow.</h2>
         </div>
      </div>
<body>
</html>

Contents of my CSS file

我的CSS文件的内容

.about_container { 
   color: snow;
   display: flex;
   border-bottom: 1px solid black;
}

.about_container .welcome {
   background-color: #DCC7AA; 
   float: left;
   margin 0;
   width: 50%;
   -webkit-flex: 1; 
   -moz-flex: 1
   -ms-flex: 1; 
   flex: 1;
}

.about_container .welcome_content { 
   background-color: #F7882F; 
   margin: 0px;
   top: 0;
   float: right;
   width: 50%;
   -webkit-flex: 1; 
   -moz-flex: 1
   -ms-flex: 1; 
   flex: 1;
}

.about_container .welcome_content p{ 
   padding: 15px;
}

.about_container .welcome h1 {
   border: 3px solid snow;
   border-radius: 10px; 
   font-family: 'Julius Sans One', sans-serif;
   margin-left: 10%; margin-right: 10%;
   padding: 10px;
   text-align: center;
}

#projects{
   clear: both;
}

Output: The element in my left div is not vertically centered as you can see from this screenshot

输出：我从左侧div中的元素不是垂直居中的，如此截图所示

2 个解决方案

#1

Add the following parameters to .about_container .welcome h1

将以下参数添加到.about_container .welcome h1

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

and add position: relative to .about_container .welcome

并添加位置：相对于.about_container .welcome

.about_container {
  color: snow;
  display: flex;
  border-bottom: 1px solid black;
}
.about_container .welcome {
  background-color: #DCC7AA;
  float: left;
  position: relative;
  margin: 0;
  width: 50%;
  -webkit-flex: 1;
  -moz-flex: 1 -ms-flex: 1;
  flex: 1;
}
.about_container .welcome_content {
  background-color: #F7882F;
  margin: 0px;
  top: 0;
  float: right;
  width: 50%;
  -webkit-flex: 1;
  -moz-flex: 1 -ms-flex: 1;
  flex: 1;
}
.about_container .welcome_content p {
  padding: 15px;
}
.about_container .welcome h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 3px solid snow;
  box-sizing: border-box;
  border-radius: 10px;
  font-family: 'Julius Sans One', sans-serif;
  padding: 10px;
  text-align: center;
}
#projects {
  clear: both;
}

<div class="about_container">
  <div class="welcome">
    <h1>Welcome<br>to my<br>Webpage!</h1>
  </div>
  <div class="welcome_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<div id="projects">
  <h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>

#2

Just make .about_container .welcome a flex container too. Add this to the .about_container .welcome rule:

只需制作.about_container。也欢迎使用Flex容器。将此添加到.about_container .welcome规则：

display: flex;
flex-direction: column;
justify-content: center;

#1