Center text in div

Question

I have a div 30px high and 500px wide  This div can contain two lines of text one under the other  and is styled  padded  accordingly  But sometimes it only contains one line  and I want it to be centered  Is this possible

User · Answer

Add to the selector containing the text  margin auto

User · Answer

I believe you want the text to be vertically centered inside your div  not  only  horizontally  The only reliable way I know of doing this is using   display  table-cell  vertical-align  middle    on your div  and it works with any number of lines  You can see a test here  http   jsfiddle net qMtZV 1   Be sure to check browser support of this property  as it is not supported     for example     in IE7 or earlier   UPDATE 02 10 2016  Five years later this technique is still valid  but I believe there are better and more solid solutions to this problem  Since Flexbox support is good nowadays  you might want to do something along these lines  http   codepen io michelegera pen gPZpqE

User · Answer

display  block  text-align  center

User · Answer

div       height  256px      width  256px      display  table-cell      text-align  center      line-height  256px      The trick is to set the line-height equal to the height of the div

User · Answer

I may be missing something here  but have you tried   text-align center

User · Answer

I ve looked around and the  display  table-cell  vertical-align  middle    seems to be the most popular solution

User · Answer

Will this work for you   div   text-align  center

User · Answer

For the parent div use following CSS   style  display  flex align-items  center

User · Answer

If you have text inside a  lt div gt     text-align  center  vertical-align  middle  display  table-cell

User · Answer

HTML   lt div class  outside  gt     lt div class  inside  gt         lt p gt Centered Text lt  p gt     lt  div gt   lt  div gt    CSS   outside      position  absolute     display  table       inside     display  table-cell     vertical-align  middle     text-align  center

User · Answer

You may try to use in your CSS the property vertical-align in order to center it verticaly  div         vertical-align middle        if it s a size problem  please notice that 2 text lines and a padding style have great chance to have a height superior to 30px     For example  if your font size is 12 px and your div padding is 5 px  a one text line div height will be 5px  padding-top    12px   5 px  padding-bottom    22px  lt  30px so no problem   With a 2 text lines div  it will be 5px  12px  2  2 lines    5px   34px   30px and your div height will be automatically changed   Try either to increase your div height  maybe 40px  or to reduce your padding   Hope it will help

User · Answer

Adding line height helps too   text-align  center  line-height  18px     for example

User · Answer

To center horizontally  use text-align center     To center vertically  one can only use vertical-align middle if there is another element in the same row that it is being aligned to  See it working here   We use an empty span with a height of 100   and then put the content in the next element with a vertical-align middle   There are other techniques such as using table-cell or putting the content in an absolutely positioned element with top  bottom  left  and right all set to zero  but they all suffer from cross browser compatibility issues

[css] Center text in div?

Examples related to css

Examples related to padding

Examples related to spacing