在 flexbox 全屏内居中

Question

我试图让文本位于 flexboxes 的中间，因此大框 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 & justify-content: center.

同时制作 .first、.second-a 和 .second-b，并在其中应用弹性对齐方式属性。喜欢：

.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

其中>表示立即数child

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>

在 flexbox 全屏内居中

Center within, within flexbox fullscreen

html

css

flexbox

fullscreen

center