如何垂直对齐的div页上Flexbox的

以下不垂直对齐，在浏览器标签页文本的DIV（它是水平排列正确）：如何垂直对齐的div页上Flexbox的

<div style="height: 100%; display: flex; align-items: center; justify-content: center;"> 
 

 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>

有什么不对？

来源

2016-09-26 EricC

设置一个高度上的父。在你的情况''身体'和'html'。当你使用100％ - 认为100％是什么？ – AA2992

问题在于你给父容器的高度。 height :100%不占用整个高度。改变，要100vh或类似的

这里是更新Demo

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

<div class="container"> 
 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 
</div>

来源

2016-09-26 08:04:25

试试这个：

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;"> 
 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 
</div>

这是因为你的父母div不占全高。

来源

2016-09-26 08:05:27 Fralec

-1

试试这个

<div style="height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: lightgrey;"> 
 

 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>

来源

2016-09-26 08:05:41

请尝试波纹管下面的代码

body, html{ 
 
    height:100%; 
 
    width:100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.demo-wp{ 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background:green; 
 
    height:100%; 
 
} 
 

 
.inner-div{ 
 
    background:gold; 
 
    padding:20px; 
 
}

<div class="demo-wp"> 
 

 
    <div class="inner-div"> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>

来源

2016-09-26 08:06:41

如何垂直对齐的div页上Flexbox的

回答

相关问题