How to vertically center text in div

Question

I've tried about 6-7 different methods for centering this text vertically so it remains responsive and in the center of the div.

here is a fiddle: http://jsfiddle.net/p2NLK/

I've tried using positioning such as

margin-top: 40%;

or

margin-top: 20em;

to the h1 element to push the text down but its not fluid at all and breaks a lot.

Take a look at [this](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css?rq=1#answer-8865463a) answer. It has some solutions. — Muhammad Osmond, Mar 12 '14 at 07:32
Ok I've already tried all these techniques because my container is a position absolute this doesn't seem to work. — MikaAK, Mar 12 '14 at 07:37

score 2 · Answer 1 · answered Mar 12 '14 at 07:24

2

Have you tried

<div style="text-align: center;">

Works for horizontal center.

Try this for vertically centered.

or

CSS

body, html, #wrapper {
width: 100%;
height: 100%
}

#wrapper {
display: table
}

#main {
display: table-cell;
vertical-align: middle;
text-align:center
}

HTML

<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>

Hope this helps. Do leave a feed back.

answered Mar 12 '14 at 07:24

Sorry I should of been clearer it needs to be vertically centered – MikaAK Mar 12 '14 at 07:25
np. Edited my answer. Hope this helps. – Mar 12 '14 at 07:27
http://jsfiddle.net/p2NLK/1/ See this fiddle for the solution implimented it still doesnt work :( – MikaAK Mar 12 '14 at 07:32
You haven't tried my latest solution..pl check – Mar 12 '14 at 07:33
Yep i have :( hence why im posting check http://jsfiddle.net/k5yPM/ for proof – MikaAK Mar 12 '14 at 07:38
See, try this. Include your container div in another div (say wrapper as in my eg) and assign that as a table(as exactly shown) and then do your stuff. – Mar 12 '14 at 07:46
1

Dude, the third solution worked for me. – Code Mar 12 '14 at 07:48

score 0 · Answer 2 · answered Mar 12 '14 at 07:51

0

try this:

replace margin-top: 40%; to following css

display: table-cell;
vertical-align: middle;
text-align:center;

answered Mar 12 '14 at 07:51

Mr.G

3,413
2
16
20

How to vertically center text in div

2 Answers2