在flexbox全屏内的中心

Question

我试图将文本放在flexbox中间，这样大盒子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>

Answer 1

使用align-items: center＆amp; justify-content: center。

同时制作.first，.second-a＆amp; .second-b并在这些中应用flex alignment属性。像：

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

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

请看下面的代码段：

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>

希望这有帮助！

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