问题描述:

I'm using the following HTML and CSS. I just got familiar with flex box and followed this tutorial to centre (both horizontally , vertically) some other HTML elements :

<div>

<div class="page-center">

<div id="target_div">

<h2 class="text-center">Connecting to the server</h2>

<div class="progress">

<div class="progress-bar progress-bar-striped active" style {{width: '100%'}}></div>

</div>

</div>

</div>

</div>

.page-center {

display: flex;

align-items: center;

justify-content: center;

max-height: 100%;

}

The elements inside target_div are centered horizontally but not vertically.

Any idea why this doesn't work ?

网友答案:

Right now, you're setting the max-height of the div to be 100%. What you want is to set the min-height to be 100%. If that doesn't fix the problem, make sure you've set the height of the html and body elements to be 100% as well using:

html, body {
  height: 100%;
}

Refer to http://codepen.io/anon/pen/JYPGLL to see it work. Notice how if we remove the styling for html and body, the "page-center" div shrinks to fit the content despite the min-height being set at 100%.

相关阅读:
Top