居中，在 flexbox 全屏内答案

【问题标题】：Center within, within flexbox fullscreen居中，在 flexbox 全屏内
【发布时间】：2017-05-08 06:16:46
【问题描述】：

我试图让文本位于弹性框的中间，因此大框 h4 和 p 位于其框的中心，而两个较小框中的文本位于其框的中间。非常感谢每一个帮助。

body {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.equal-height-container {
	margin: 0 auto;
	display: flex;
	height: 100vh;
}
	

.first {
	background-color: #fff;
	padding: 20px;
	flex: 1;
 }
  


.second {
	background-color: yellow;
	flex: 1;
	display: flex;
	flex-direction: column;
}



.second-a {
	background-color: #c0dbe2;
	flex: 1;
	padding: 20px;
}


.second-b {
	background-color: honeydew;
	flex: 1;
	padding: 20px;
}

<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>

【问题讨论】：

标签： html css flexbox fullscreen center

【解决方案1】：

使用align-items: center & justify-content: center。

同时创建你的.first、.second-a 和.second-b，并在其中应用 flex 对齐属性。喜欢：

.equal-height-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.first, .second-a, .second-b {
    display: flex;
    align-items: center;
}

看看下面的sn-p：

body {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  margin: 0;
}

.equal-height-container {
	margin: 0 auto;
	display: flex;
  align-items: center;
  justify-content: center;
	height: 100vh;
}
	

.first {
	background-color: #fff;
	padding: 20px;
	flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 40px);
 }
  


.second {
	background-color: yellow;
	flex: 1;
	display: flex;
  flex-direction: column;
  height: 100vh;
}



.second-a {
	background-color: #c0dbe2;
	flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 20px);
	padding: 20px;
}


.second-b {
	background-color: honeydew;
	flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 20px);
	padding: 20px;
}

h4 {
  margin-bottom: 0;
}

<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>

希望这会有所帮助！

【讨论】：

遗憾的是没有。这只是使框位于屏幕中间。如果您查看全屏结果。我想保持盒子的全尺寸。感谢您的帮助。
@bboogie 在我的答案中更新了代码 sn-p。请看一看。我制作了.first、.second-a 和.second-b 一个弹性容器并应用了弹性对齐属性。让我知道这是否有帮助。
索拉夫拉斯托吉！谢谢，完全一样。拯救了我的一天！
我会的。是否可以在不使文本居中的情况下将文本放在框的中间？所以你可以留下对齐的文本，但它在盒子的纯正中间？
@bboogie 为此，您需要为所有框应用一定的宽度。然后申请margin: 0 auto;

【解决方案2】：

将text-align: center; 添加到.equal-height-container > div

> 表示直系孩子

body {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.equal-height-container {
	margin: 0 auto;
	display: flex;
	height: 100vh;
}
.equal-height-container >  div {
	text-align: center;
}
	    

.first {
	background-color: #fff;
	padding: 20px;
	flex: 1;
 }
  


.second {
	background-color: yellow;
	flex: 1;
	display: flex;
	flex-direction: column;
}



.second-a {
	background-color: #c0dbe2;
	flex: 1;
	padding: 20px;
}


.second-b {
	background-color: honeydew;
	flex: 1;
	padding: 20px;
}

<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>

【讨论】：

我可能把问题表述错了。我 ment 框的垂直和水平中心。所以它直到全屏，但只有其中的文本是水平的，并且在中间是垂直的。