html - 如果div位于屏幕中心，如何在底部左右显示文本

Question

我正在屏幕中央显示带有文本的框，该框正在运行。现在我在底部添加页脚，但它显示在顶部，因为我的 div 是绝对的。我必须在底部显示左右文本。

		.bg_cyan{background-color: #5AFCEB;}
		.center_screen{
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
		}
		.thankyou_set{top: 50%;}
		.thankyou_set .thanku_popup3{
			width: 100%;
			margin: auto;
			box-sizing: border-box;
			padding: 50px;
			background-color: red;
		}
		.thankyou_content h2{font-size: 30px;}

		.form_terms{
			margin: 0;padding: 0;list-style: none;
			float: right;
		}
		.form_terms li{display: inline-block;margin: 10px;}
		.form_terms li a{color: #5e5e5e;font-size: 18px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
		<div class="clearfix">

		<div class="thankyou_set center_screen">
			<div class="thanku_popup3">
				<div class="thankyou_content">
					<h2>Thank you for registering!</h2>
					
				</div>
				</div>
			</div>


		</div>
		<div class="corp_footer">
			<div class="form_copy_right pull-left">
			<p>&#169; All right reserved</p>
		</div>
			<ul class="form_terms">
				<li><a href="website">Website</a></li>
				<li><a href="about">About</a></li>
				<li><a href="privacy-policy">Privacy Policy</a></li>
			</ul>
		</div>


	</div>
  

我得到输出

Answer 1

当我们有 the power of Flexbox 时不需要绝对位置这些日子。 Here's a CodePen you can play around with查看其他元素的行为方式，但是通过将父容器设置为 display:flex; 然后使用 Flexbox 可以很容易地垂直对齐，然后为子元素(您想要居中的内容)留出 margin 的边距: auto auto; 使其完美地居中于其父元素的中心垂直和水平。

.container {
  display: flex;
  background: red;
  width: 100%;
  height: 100vh;
}

.thankyou_content {
  margin: auto auto;
}

.thankyou_set .thanku_popup3 {
  display: flex;
  padding: 50px;
  width: 100%;
  box-sizing: border-box;
  background-color: red;
}

.thankyou_content h2 {
  font-size: 30px;
}

.corp_footer {
  display: flex;
  justify-content: space-between;
}

.form_terms {
  margin: 0;
  padding: 0;
  list-style: none;
  float: right;
}

.form_terms li {
  display: inline-block;
  margin: 10px;
}

.form_terms li a {
  color: #5e5e5e;
  font-size: 18px;
}

<div class="container">
  <div class="thankyou_content">
    <h2>Thank you for registering!</h2>
  </div>
</div>

<div class="corp_footer">
  <div class="form_copy_right pull-left">
    <p>&#169; All right reserved</p>
  </div>
  <ul class="form_terms">
    <li><a href="website">Website</a></li>
    <li><a href="about">About</a></li>
    <li><a href="privacy-policy">Privacy Policy</a></li>
  </ul>
</div>

</div>