Centered div is getting cut off at the top? - html

Question

Here's the page I'm working on: http://en08-phx.stablehost.com/~news/test.html
This is the code I'm using to center the div:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: auto;
padding: 20px;
background-color:rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
border-radius:5px;
border:2px solid rgba(255, 255, 255, 0.5);
}
Whenever I decrease the width of my browser or use a mobile phone, the top of the page starts to get cut off.
I want the div to be centered regardless of the size of the browser width. However, if the browser's height is too small, I'd prefer to just add a margin of 10px to the top/bottom and make sure all the text shows.
What exactly am I doing wrong here?

Answer 1

The issue with this positioning technique (top 50% minus translateY -50%) is that it aligns itself based its own height. When the viewport squishes the container taller than the viewport it remains centered with the top and bottom getting cut off. If you're able to use flexbox I recommend flexbox (http://caniuse.com/#search=flex).
Wrap the container you want always centered in another container such as centered-wrapper and apply flexbox to center it:
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
The min-height is very important here. If your div doesn't stretch to the page's height it'll fill and center its child. If it is then it'll just keep expanding avoiding the scenario that you have as well. If you're box is relative in height to the whole page then you'll also need to set the height of your page for this to work:
html,
body {
height: 100%;
}
You don't need any centering done to your centered div, just the visual styles.
Here's a sample of it in action: https://jsfiddle.net/vfc9n7p2/

Answer 2

body {
display: flex;
flex-direction: column;
justify-content: center;
}
div {
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
width: 70%;
height: auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 auto;
}
this will work fine for you.

Answer 3

<br clear="all">
This has worked for me. Just put this before your content element like div.