I can suggest two solutions to horizontally and vertically center an element.
One is Flexbox, like some people already mentioned above. It's a relatively new feature, so old browsers may not support it. (Additionally, make sure to prepend the necessary vendor prefixes.)
HTML
Code: Select all
<div class="container">
<div class="box"></div>
</div>
CSS
Code: Select all
html, body {
min-height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Then set the width and height of your .box.
The second one would be using the line-height and vertical-align hack.
Assuming we have the same HTML code...
CSS
Code: Select all
html, body {
min-height: 100%;
}
.container {
line-height: 100vh; /* 100% viewport height */
text-align: center; /* to center an inline-block */
}
.box {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
The .box must have a set width and height for this to work.
As for the text inside the box, I'm seconding the padding solution suggested by Mikari.
I hope this helps!
![Ok :ok:](./images/smilies/balloon_62.gif)