Text inside a div to align vertically and horizontally

Question

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

Horizontal alignment is achieved using the text-align:center property, but I cannot vertically center it.

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

I need a solution that can be suitable for any div of different sizes (in my case it is 100% both width and height).

Here is my fiddle

Answer 1

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

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

Fiddle

---

Solution for multiline text:

The idea is to get the text height text, divide it by 2 and use it in calc(50% - ****) when loading the page or resizing the window. Then find the rule for the p tag and change 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 work.

Vertical Aligned Text

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. This is not an ideal solution for various content, but you will understand what to do next. For now padding-top: 50% is perfect for your sample script.

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 row for each element, then a simpler solution would be to use row 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 the text vertically as

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

}