如果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;然后给子元素（要居中的位置）留出margin: auto auto;的宽度，Flexbox可以轻松进行垂直对齐。使其完全垂直于其父对象的中心垂直和水平。

.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>

Answer 2

您可以通过编写一些flex属性来轻松完成此操作。现在，您所要做的只是替换下面的代码即可得到结果。

.main-container{
  height:100vh;
}

.content{
  display:flex;
  background:red;
  flex-direction:column;
  justify-content:center;
  width:100%;
  height:100%;
  background:#fff;
}

.corp_footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.thankyou_content h2{
  font-size:30px;
}

.thankyou_content{
   width: 100%;
   margin: auto;
   box-sizing: border-box;
   padding: 50px;
   background-color: red;
   text-align:center;
}

.center_screen{
flex:3;
align-items:center;
display:flex;
justify-content:center;
}

.form_terms{
  display:flex;
  list-style:none;
  flex-wrap:wrap;
 
  
}
.form_terms li a{
  margin: 10px;
  text-decoration:none;
}
.form_terms li a{
  color: #5e5e5e;font-size: 18px;
}

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

<div class="container main-container">
		<div class="content">
      <div class="thankyou_set center_screen">
			<div class="thanku_popup3">
				<div class="thankyou_content">
					<h2>Thank you for registering!</h2>
					
				</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>
  
  

	</div>