Text inside a div to align both vertically and horizontally

Question

I have a <div> and a <p> inside the div containing some text.

Horizontal alignment is achievable using text-align:center property but I am not able to middle it vertically.

I ve checked other related solutions, but they are specific to that particular problem and not suited for any div size.

I need a solution that could possibly be suited for any div of varying dimensions (in my case it is 100% both width and height).

Here is my Fiddle

Answer 1

You can use top: calc(50% - 1em) on p to center it vertically.

p {
    position: relative;
    top: calc(50% - 1em);
}

Fiddle

---

Solution for Multiline text:

The idea is to get the height of the text, divide it by 2 and use it in calc(50% - ****) when the page loads or the window is resized. Then find the rule for the p tag and modify the top property.

Fiddle

 var p = document.getElementsByTagName('p')[0]; function doMath() { var ss = document.styleSheets; for (k = 0; k < ss.length; k++) { var rules = ss[k]; for (l = 0; l < rules.cssRules.length; l++) { var r = rules.cssRules[l]; if (r.selectorText == "p") { r.style.top = 'calc(50% - ' + String(parseInt(getComputedStyle(p).height.slice(0, -2)) / 2) + 'px)' } } } } doMath(); window.onresize = doMath; 

 html, body { height: 100%; width: 100%; margin: 0 auto; } #dvTxt { background-color: lightblue; height: 100%; width: 100%; text-align: center; vertical-align: middle; } p { position: relative; top: calc(50% - 7.5px); } 

 <div id="dvTxt"> <p>This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically</p> </div> 

Answer 2

The following CSS will works.

Text aligned center Vertically

CSS:

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

#dvTxt{
    background-color:lightblue;
    height:100%;
    width:100%;
    text-align: center;
    vertical-align: middle;
    display: table;
}

#span {
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
}

HTML

<div id="dvTxt">
    <p id="span">This is my text. I want it to be centered vertically</span>
</div>

Answer 3

add padding-top:50% to #dvTxt . It is not perfect solution for varying content but you will get idea what to do next. For the now padding-top:50% is perfect for your fiddle example.

Answer 4

You can use

position: absolute

see DEMO

CSS:

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

#dvTxt{
background-color:lightblue;
height:100%;
width:100%;
position: relative;
}

p {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}

Answer 5

If you have only one line per element then easier solution would be using line-height.

#dvTxt{
    background-color:lightblue;
    height:100%;
    width:100%;
    text-align: center;
    vertical-align: middle;
    line-height:8em;
}

http://jsfiddle.net/o3smkvk9/10/

Answer 6

you can use padding attribute to center your text vertically as

#dvTxt{
background-color:lightblue;
height:100%;
width:100%;
text-align: center;
padding:50% 0;

}