I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.
.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; }<div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>33 Answers
The correct way to do this in modern browsers is to use Flexbox.
See this answer for details.
See below for some older ways that work in older browsers.
Article summary:
For a CSS 2 browser, one can use display:table/display:table-cell to center content.
A sample is also available at JSFiddle:
div { border:1px solid green;}<div> <div> <div> everything is vertically centered in modern IE8+ and others. </div> </div> </div>It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using # to hide styles from newer browsers:
div { border:1px solid green;}<div> <div style= "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div> everything is vertically centered </div> </div> </div>You need to add the line-height attribute and that attribute must match the height of the div. In your case:
.center { height: 309px; line-height: 309px; /* same as height! */ }<div> A single line. </div>In fact, you could probably remove the height attribute altogether.
This only works for one line of text though, so be careful.
2Here's a great resource
Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.
Using Flexbox
Inline with keeping this post up to date with the latest tech, here's a much easier way to center something using Flexbox. Flexbox isn't supported in Internet Explorer 9 and lower.
Here are some great resources:
- A guide to Flexbox
- Centering elements with Flexbox
- Internet Explorer 10 syntax for Flexbox
- Support for Flexbox
JSFiddle with browser prefixes
li { display: flex; justify-content: center; align-content: center; flex-direction: column; /* Column | row */ }<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>Another solution
This is from zerosixthree and lets you center anything with six lines of CSS
This method isn't supported in Internet Explorer 8 and lower.
p { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>Previous answer
A simple and cross-browser approach, useful as links in the marked answer are slightly outdated.
How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or CSS line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera and Safari. There are two special stylesheets (one for Internet Explorer 7 and another for Internet Explorer 6) to help them along due to their CSS limitations which modern browsers don't have.
Andy Howard - How to vertically and horizontally center text in an unordered list or div
As I didn't care much for Internet Explorer 7/6 for the last project I worked on, I used a slightly stripped down version (i.e. removed the stuff that made it work in Internet Explorer 7 and 6). It might be useful for somebody else...
.outerContainer { display: table; width: 100px; /* Width of parent */ height: 100px; /* Height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; }<ul> <li> <div> <div> <div> <p> <!-- Content --> Content </p> </div> </div> </div> </li> <li> <div> <div> <div> <p> <!-- Content --> Content </p> </div> </div> </div> </li> </ul>It is easy with display: flex. With the following method, the text in the div will be centered vertically:
div { display: -webkit-flex; display: flex; align-items: center; /* More style: */ height: 300px; background-color: #888; }<div> Your text here. </div>And if you want, horizontal:
div { display: -webkit-flex; display: flex; align-items: center; justify-content: center; /* More style: */ height: 300px; background-color: #888; }<div> Your text here. </div>You must see the browser version you need; in old versions the code doesn’t work.
0I use the following to vertically center random elements easily:
HTML:
<div> <div>This is vertically aligned text within a div</div> </div> CSS:
#mytext { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } This centers the text in my div to the exact vertical middle of a 200px-high outer div. Note that you may need to use a browser prefix (like -webkit- in my case) to make this work for your browser.
This works not only for text, but also for other elements.
0Try this, add on the parent div:
display: flex; align-items: center; You can do this by setting the display to 'table-cell' and applying a vertical-align: middle;:
{ display: table-cell; vertical-align: middle; } This is however not supported by all versions of Internet Explorer according to this excerpt I copied from without permission.
Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported by Internet Explorer 7 and earlier. Internet Explorer 8 requires a !DOCTYPE. Internet Explorer 9 supports the values.
The following table shows the allowed display values also from .
These days (we don't need Internet Explorer 6-7-8 any more) I would just use CSS display: table for this issue (or display: flex).
For older browsers:
Table:
.vcenter { display: table; background: #eee; /* optional */ width: 150px; height: 150px; text-align: center; /* optional */ } .vcenter > :first-child { display: table-cell; vertical-align: middle; }<div> <p>This is my Text</p> </div>Flex:
.vcenter { display: flex; align-items: center; height: 150px; justify-content: center; /* optional */ background: #eee; /* optional */ width: 150px; }<div> <p>This is my text</p> </div>This is (actually, was) my favorite solution for this issue (simple and very well browser supported):
div { margin: 5px; text-align: center; display: inline-block; } .vcenter { background: #eee; /* optional */ width: 150px; height: 150px; } .vcenter:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */ } .vcenter > :first-child { display: inline-block; vertical-align: middle; max-width: 99.999%; }<div> <p>This is my text</p> </div> <div> <h4>This is my Text<br/>Text<br/>Text</h4> </div> <div> <div> <p>This is my</p> <p>Text</p> </div> </div>Flexbox worked perfectly for me, centering multiple elements inside parent div horizontally & vertically.
Code below stacks all elements inside of parent-div in a column, centering the elements horizontally & vertically. I used the child-div to keep the two Anchor elements on same line (row). Without child-div all three elements (Anchor, Anchor & Paragraph) are stacked inside parent-div's column on top of each other. Here only child-div is stacked inside parent-div column.
.parent-div { height: 150px; display: flex; flex-direction: column; justify-content: center; background: pink; }<div> <div> <a href="">GitHub</a> <a href="">Facebook</a> <p>© 2019 Lorem Ipsum.</p> </div> </div>You can use display grid and place-items center:
.container { width: 200px; height: 200px; border: solid red; display: grid; place-items: center; }<div> Lorem, ipsum dolor. </div>Here is a solution that works best for a single line of text.
It can also work for multi-lined text with some tweaking if the number of lines is known.
.testimonialText { font-size: 1em; /* Set a font size */ } .testimonialText:before { /* Add a pseudo element */ content: ""; display: block; height: 50%; margin-top: -0.5em; /* Half of the font size */ } <!DOCTYPE html> <html> <head> <style> .container { height: 250px; background: #f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -webkit-box-align: center; justify-content: center; } p{ font-size: 24px; } </style> </head> <body> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html> You can align center text vertically inside a div using Flexbox.
<div> <p>This is the testimonial text.</p> </div> div { display: flex; align-items: center; } You can learn more about it at A Complete Guide to Flexbox.
Check this simple solution:
HTML
<div><h3>I'm a vertically centered element</h3></div> CSS
.block-title { float: left; display: block; width: 100%; height: 88px } .block-title h3 { display: table-cell; vertical-align: middle; height: inherit } There's a simpler way to vertically align the content without resorting to table/table-cell:
In it I have added an invisible (width=0) div that assumes the entire height of the container.
It seems to work in Internet Explorer and Firefox (latest versions). I didn't check with other browsers
<div> <div> everything is vertically centered in modern IE8+ and others. </div> <div></div> </div> And of course the CSS:
.t, .t > div:first-child { border: 1px solid green; } .t { height: 400px; } .t > div { display: inline-block; vertical-align: middle } .t > div:last-child { height: 100%; } This is the cleanest solution I have found (Internet Explorer 9+) and adds a fix for the "off by .5 pixel" issue by using transform-style that other answers had omitted.
.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } Source: Vertical align anything with just 3 lines of CSS
HTML :
<div> <label for="option2">Time</label> </div> CSS :
.align-middle { margin-top: auto; margin-bottom: auto; } A simple solution to an element of not knowing values:
HTML
<div> <div> whatever </div> </div> CSS
.main { position: relative } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } According to Adam Tomat's answer there was prepared a JSFiddle example to align the text in div:
<div> text<br/>in the block </div> by using display:flex in CSS:
.cells-block { display: flex; flex-flow: column; align-items: center; /* Vertically */ justify-content: flex-end; /* Horisontally */ text-align: right; /* Addition: for text's lines */ } with another example and a few explanations in a blog post.
Margin auto on a grid-item.
Similarly to Flexbox, applying margin auto on a grid-item centers it on both axes:
.container { display: grid; } .element { margin: auto; } Use:
h1 { margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .container { height: 200px; width: 500px; position: relative; border: 1px solid #eee; }<div> <h1>Vertical align text</h1> </div>With this trick, you can align anything if you don't want to make it center add "left:0" to align left.
HTML
<div><!--used as a container--> <!-- add content here to to make some height and width example:<img src="" alt=""> --> <div> <div> <div> Vertical contents goes here </div> </div> </div> </div> CSS
.relative { position: relative; } .absolute { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); } .table { display: table; height: 100%; width: 100%; text-align: center; color: #fff; } .table-cell { display: table-cell; vertical-align: middle; } Using flex, be careful with differences in browsers' rendering.
This works well both for Chrome and Internet Explorer:
.outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; text-align: center; justify-content: center; align-items: center; background-color: #fcc; }<div><div>Active Tasks</div></div>Compare with this one that works only with Chrome:
.outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; background-color: #fcc; }<div> <div><span>Active Tasks</span></div> </div>This will center text vertically:
.parent { display: inline-flex } .testimonialText { margin-top: auto; margin-bottom: auto; }<div> <div> Hello World </div> </div>Using CSS grid did it for me:
.outer { background-color: grey; width: 10rem; height: 10rem; display: grid; justify-items: center; } .inner { background-color: #FF8585; align-self: center; }<div class='outer'> <div class='inner'> Content </div> </div>This is another variation of the div in a div pattern using calc() in CSS.
<div> Text in outer div. <div> Text in inner div. </div> </div> This works, because:
position:absolutefor precise placement of thedivwithin adiv- we know the height of the inner
divbecause we set it to20px. calc(50% - 10px)for 50% - half the height for centering the innerdiv
This works fine:
HTML
<div> <span>Some text</span> <mat-icon>info_outline</mat-icon> </div> Sass
.information { display: inline-block; padding: 4px 0; span { display: inline-block; vertical-align: middle; } mat-icon { vertical-align: middle; } } Without and with the image tag <mat-icon> (which is a font).
You can use css flexbox.
.testimonialText { height: 500px; padding: 1em; display: flex; align-items: center; justify-content: center; border: 1px solid #b4d2d2; }<div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>Hmm, there're obviously many ways to solve this.
But I have a <div> that's positioned absolutely, height:100% (actually, top:0;bottom:0 and fixed width) and display:table-cell just didn't work to center text vertically. My solution did require an inner span element, but I see many of the other solutions do also, so I might as well add it:
My container is a .label and I want the number vertically centered in it. I did it by positioning absolutely at top:50% and setting line-height:0
<div><span>1.</span></div> And the CSS is as follows:
.label { position:absolute; top:0; bottom:0; width:30px; } .label>span { position:absolute; top:50%; line-height:0; } There are several tricks to display content or an image in the center of a div. Some of the answers are really nice and I am fully agree with these too.
Absolute Horizontal And Vertical Centering In CSS
There are more than 10 techniques with examples. Now it's up to you which you prefer.
No doubt, display:table; display:table-Cell is a better trick.
Some good tricks are the following:
Trick 1 - By using display:table; display:table-cell
HTML
<div> <div> <div> CONTENT </div> </div> </div> CSS Code
.Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } Trick 2 - By using display:inline-block
HTML
<div> <div> CONTENT </div> </div> CSS code
.Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */ } Trick 3 - By using position:relative;position:absolute
<div> <div> <h4>ABSOLUTE CENTER, <br/> WITHIN CONTAINER.</h4> <p>This box is absolutely centered, horizontally and vertically, within its container</p> </div> </div> 
