居中，在 flexbox 全屏内

Posted 2023-03-29

【中文标题】居中，在 flexbox 全屏内

【英文标题】：Center within, within flexbox fullscreen

【发布时间】：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>

【参考方案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 框的垂直和水平中心。所以它直到全屏，但只有其中的文本是水平的，并且在中间是垂直的。