How do I vertically center text with CSS

Question

I have a  lt div gt  element which contains text and I want to align the contents of this  lt div gt  vertically center  Here is my  lt div gt  style   x000D   x000D   box     height  170px    width  270px    background   000    font-size  48px    color   FFF    text-align  center    x000D   lt div id  box  gt    Lorem ipsum dolor sit  lt  div gt  x000D   x000D   x000D   What is the best way to achieve this goal

User · Answer

Here is another option using flexbox  HTML  lt div id  quot container quot  gt     lt div class  quot child quot  gt       lt span        gt Lorem ipsum dolor sit amet consectetur adipisicing elit  Molestiae        nemo  lt  span      gt     lt  div gt   lt  div gt   CSS    container       display  flex          child       margin  auto       Result  Here is a great article about centering in css  check it out https   ishadeed com article learn-css-centering

User · Answer

Flexible approach   x000D   x000D  div   x000D    width  250px  x000D    min-height  50px  x000D    line-height  50px  x000D    text-align  center  x000D    border  1px solid  123456  x000D    margin-bottom  5px  x000D    x000D  span   x000D    display  inline-block  x000D    vertical-align  middle  x000D    line-height  normal  x000D    x000D   lt div gt  x000D     lt span gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt br   gt  x000D      Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt br   gt  x000D      Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt span gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt span gt Lorem ipsum dolor sit amet  lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D   x000D   x000D

User · Answer

This is easy and very short    x000D   x000D   block   x000D    display  table-row  x000D    vertical-align  middle  x000D    x000D   x000D   tile   x000D    display  table-cell  x000D    vertical-align  middle  x000D    text-align  center  x000D    width  500px  x000D    height  100px  x000D    x000D   lt div class  body  gt  x000D     lt span class  tile  gt  x000D      Hello middle world     x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For reference and to add a simpler answer   Pure CSS    vertical-align       position  relative      top  50       -webkit-transform  translateY -50        -ms-transform  translateY -50        transform  translateY -50        Or as a SASS SCSS Mixin    mixin vertical-align       position  relative      top  50       -webkit-transform  translateY -50        -ms-transform  translateY -50        transform  translateY -50        Use by    class-to-center        include vertical-align      By Sebastian Ekstr  m s blog post Vertical align anything with just 3 lines of CSS   This method can cause elements to be blurry due to the element being placed on a    half pixel     A solution for this is to set its parent element to preserve-3d  Like following    parent-element       -webkit-transform-style  preserve-3d      -moz-transform-style  preserve-3d      transform-style  preserve-3d      We live in 2015  and Flex Box is supported by every major modern browser   It will be the way websites are made from here on out   Learn it

User · Answer

text     background   ccc     position  relative     float  left     text-align  center     width  400px     line-height  80px     font-size  24px     color   000     float  left

User · Answer

The solution accepted as the answer is perfect to use line-height the same as the height of div  but this solution does not work perfectly when text is wrapped OR is in two lines   Try this one if text is wrapped or is on multiple lines inside a div    box     display  table-cell    vertical-align  middle      For more reference  see    Vertically Center Multi-Lined Text 6 Methods For Vertical Centering With CSS

User · Answer

Even better idea for this  You can do like this too    x000D   x000D  body  x000D  html   x000D    height  100   x000D    x000D   x000D   parent   x000D    white-space  nowrap  x000D    height  100   x000D    text-align  center  x000D    x000D   x000D   parent after   x000D    display  inline-block  x000D    vertical-align  middle  x000D    height  100   x000D    content      x000D    x000D   x000D   centered   x000D    display  inline-block  x000D    vertical-align  middle  x000D    white-space  normal  x000D    x000D   lt div class  parent  gt  x000D     lt div class  centered  gt  x000D       lt p gt Lorem ipsum dolor sit amet  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use the positioning method in CSS   Check the result here       HTML    lt div class  relativediv  gt     lt p gt      Make me vertical align as center    lt  p gt   lt  div gt    CSS    relativediv position relative border 1px solid  ddd height 300px width 300px   relativediv p position absolute top 50  transfrom translateY -50       Hope you use this method too

User · Answer

A very simple  amp  most powerful solution to vertically align center    x000D   x000D   outer-div   x000D    height  200px  x000D    width  200px  x000D    text-align  center  x000D    border  1px solid  000  x000D    x000D   x000D   inner   x000D    position  relative  x000D    top  50   x000D    transform  translateY -50    x000D    color  red  x000D    x000D   lt div class  outer-div  gt  x000D     lt span class  inner  gt No data available lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

element position  relative top  50  transform  translateY -50       Add this small code in the CSS property of your element  It is awesome  Try it

User · Answer

I would just like to extend the answer from Michielvoo in order to release need for line-height and breathing of div height  It is basically just a simplified version like this    x000D   x000D  div   x000D    width  250px  x000D       height  100px  x000D    line-height  100px     x000D    text-align  center  x000D    border  1px solid  123456  x000D    background-color   bbbbff  x000D    padding  10px  x000D    margin  10px  x000D    x000D   x000D  span   x000D    display  inline-block  x000D    vertical-align  middle  x000D    line-height  normal  x000D    x000D   lt div gt  x000D     lt span gt All grown-ups were once children    but only few of them remember it lt  span gt  x000D   lt  div gt  x000D   x000D   lt div gt  x000D     lt span gt And now here is my secret  a very simple secret  It is only with the heart that one can see rightly  what is essential is invisible to the eye  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    NOTE  commented out part of cssis needed for fixed-height of enclosing div

User · Answer

x000D   x000D   box     x000D    width  100   x000D    background   000  x000D    font-size  48px  x000D    color   FFF  x000D    text-align  center  x000D    x000D   x000D   height   x000D    line-height  170px  x000D    height  170px  x000D    x000D   x000D   transform    x000D    height  170px  x000D    position  relative  x000D    x000D   x000D   transform p   x000D    margin  0  x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    -ms-transform  translate -50   -50    x000D    transform  translate -50   -50    x000D    x000D   lt h4 gt Using Height lt  h4 gt  x000D   lt div class  box height  gt  x000D    Lorem ipsum dolor sit x000D   lt  div gt  x000D   x000D   lt hr   gt  x000D   x000D   lt h4 gt Using Transform lt  h4 gt  x000D   lt div class  box transform  gt  x000D     lt p gt Lorem ipsum dolor sit lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Set it within button instead of div if you don t care about its little visual 3D effect    x000D   x000D   box x000D    x000D    height  120px  x000D    width  300px  x000D    background   000  x000D    font-size  48px  x000D    font-style  oblique  x000D    color   FFF  x000D    x000D   lt button Id  box  disabled gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  x000D   lt  button gt  x000D   x000D   x000D

User · Answer

Newer browsers now support the CSS calc function  If you are targeting these browsers you may want to look into doing something like this    x000D   x000D   lt div style  position  relative  width  400px  height  400px  background-color  red  gt  x000D     lt span style  position  absolute  line-height  40px  height  80px  text-align  center  width  300px  overflow  hidden  top  calc 50  - 40px   left  calc 50  - 150px    gt  x000D      Here are two lines that will be centered even if the parent div changes size  x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The key is to use style    top  calc 50  -  innerFixedHeightInPX 2 px   height   innerFixedHeightInPX px   inside an absolute or relatively positioned parent div

User · Answer

You can also use below properties   display  flex   align-content  center   justify-content   center

User · Answer

I saw the previous answers  and they will work only for that width of screen  not responsive   For the responsive you have to use flex   Example   div   display flex  align-items center

User · Answer

You can try this basic approach    x000D   x000D  div   x000D    height  100px  x000D    line-height  100px  x000D    text-align  center  x000D    border  2px dashed  f69c55  x000D    x000D   lt div gt  x000D    Hello World  x000D   lt  div gt  x000D   x000D   x000D    It only works for a single line of text though  because we set the line s height to the same height as the containing box element     A more versatile approach  This is another way to align text vertically  This solution will work for a single line and multiple lines of text  but it still requires a fixed height container    x000D   x000D  div   x000D    height  100px  x000D    line-height  100px  x000D    text-align  center  x000D    border  2px dashed  f69c55  x000D    x000D  span   x000D    display  inline-block  x000D    vertical-align  middle  x000D    line-height  normal  x000D    x000D   lt div gt  x000D     lt span gt Hello World  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The CSS just sizes the  lt div gt   vertically center aligns the  lt span gt  by setting the  lt div gt  s line-height equal to its height  and makes the  lt span gt  an inline-block with vertical-align  middle  Then it sets the line-height back to normal for the  lt span gt   so its contents will flow naturally inside the block     Simulating table display  And here is another option  which may not work on older browsers that don t support display  table and display  table-cell  basically just Internet Explorer 7   Using CSS we simulate table behavior  since tables support vertical alignment   and the HTML is the same as the second example    x000D   x000D  div   x000D    display  table  x000D    height  100px  x000D    width  100   x000D    text-align  center  x000D    border  2px dashed  f69c55  x000D    x000D  span   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt div gt  x000D     lt span gt Hello World  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D      Using absolute positioning  This technique uses an absolutely positioned element setting top  bottom  left and right to 0  It is described in more detail in an article in Smashing Magazine  Absolute Horizontal And Vertical Centering In CSS    x000D   x000D  div   x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    height  100px  x000D    width  100   x000D    border  2px dashed  f69c55  x000D    x000D   lt div gt  x000D     lt span gt Hello World  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Absolute Positioning and Stretching  As with the method above this one begins by setting positioning on the parent and child elements as relative and absolute respectively  From there things differ   In the code below I   ve once again used this method to center the child both horizontally and vertically  though you can use the method for vertical centering only   HTML   lt div id  parent  gt       lt div id  child  gt Content here lt  div gt   lt  div gt    CSS   parent  position  relative    child       position  absolute      top  0      bottom  0      left  0      right  0      width  50       height  30       margin  auto      The idea with this method is to try to get the child element to stretch to all four edges by setting the top  bottom  right  and left vales to 0  Because our child element is smaller than our parent elements it can   t reach all four edges   Setting auto as the margin on all four sides however causes opposite margins to be equal and displays our child div in the center of the parent div   Unfortunately the above won   t work in Internet nbsp Explorer nbsp 7 and below  and like the previous method the content inside the child div can grow too large  causing it to be hidden

User · Answer

For a single line of text  or a single character  you can use this technique   It can be used when  box has a non-fixed  relative height in      lt div id  box  gt  lt  div gt    box  before       display  block      content          height  50       box  after       vertical-align  top      line-height  0      content   TextContent       See a live demo at JsBin  easier to edit CSS  or JsFiddle  easier to change height of result frame    If you want to place inner text in HTML  not in CSS  then you need to wrap text content in additional inline element and edit  box  after to match it   And  of course  content  property should be removed    For example   lt div id  box  gt  lt span gt TextContent lt  span gt  lt  div gt   In this case   box  after should be replaced with  box span   For Internet nbsp Explorer nbsp 8 support you must replace    with

User · Answer

Try the following code   display  table-cell  vertical-align  middle     x000D   x000D  div   x000D    height  80   x000D    width  100   x000D    text-align  center  x000D    display  table-cell  x000D    vertical-align  middle  x000D    background   4CAF50  x000D    color   fff  x000D    font-size  50px  x000D    font-style  italic  x000D    x000D   lt div gt  x000D    Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I needed a row of clickable elephants  vertically centered  but without using a table to get around some Internet nbsp Explorer nbsp 9 weirdness   I eventually found the nicest CSS  for my needs  and it s great with Firefox  Chrome  and Internet nbsp Explorer nbsp 11  Sadly Internet nbsp Explorer nbsp 9 is still laughing at me      x000D   x000D  div   x000D    border  1px dotted blue  x000D    display  inline  x000D    line-height  100px  x000D    height  100px  x000D    x000D   x000D  span   x000D    border  1px solid red  x000D    display  inline-block  x000D    line-height  normal  x000D    vertical-align  middle  x000D    x000D   x000D   out   x000D    border  3px solid silver  x000D    display  inline-block  x000D    x000D   lt div class  out  onclick  alert 1   gt  x000D     lt div gt   lt span gt  lt img src  http   www birdfolk co uk littleredsolo png   gt  lt  span gt   lt  div gt  x000D     lt div gt   lt span gt A lovely clickable option  lt  span gt   lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  out  onclick  alert 2   gt  x000D     lt div gt   lt span gt  lt img src  http   www birdfolk co uk bang2 Ship01 png   gt  lt  span gt   lt  div gt  x000D     lt div gt   lt span gt Something charming to click on  lt  span gt   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Obviously you don t need the borders  but they can help you see how it works

User · Answer

Another way  not mentioned here yet  is with Flexbox   Just add the following code to the container element   display  flex  justify-content  center     align horizontal    align-items  center     align vertical      Flexbox demo 1   x000D   x000D   box   x000D    height  150px  x000D    width  400px  x000D    background   000  x000D    font-size  24px  x000D    font-style  oblique  x000D    color   FFF  x000D    text-align  center  x000D    padding  0 20px  x000D    margin  20px  x000D    display  flex  x000D    justify-content  center  x000D       align horizontal    x000D    align-items  center  x000D       align vertical    x000D    x000D   lt div class  box  gt  x000D    Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh x000D   lt  div gt  x000D   x000D   x000D    Alternatively  instead of aligning the content via the container  flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container  like the example given in the question above    So to center the flex item both horizontally and vertically just set it with margin auto  Flexbox Demo 2   x000D   x000D   box   x000D    height  150px  x000D    width  400px  x000D    background   000  x000D    font-size  24px  x000D    font-style  oblique  x000D    color   FFF  x000D    text-align  center  x000D    padding  0 20px  x000D    margin  20px  x000D    display  flex  x000D    x000D   box span   x000D    margin  auto  x000D    x000D   lt div class  box  gt  x000D     lt span gt margin auto on a flex item centers it both horizontally and vertically lt  span gt   x000D   lt  div gt  x000D   x000D   x000D    NB  All the above applies to centering items while laying them out in horizontal rows  This is also the default behavior  because by default the value for flex-direction is row  If  however flex-items need to be laid out in vertical columns  then flex-direction  column should be set on the container to set the main-axis as column and additionally the justify-content and align-items properties now work the other way around with justify-content  center centering vertically and  align-items  center centering horizontally   flex-direction  column demo   x000D   x000D   box   x000D    height  150px  x000D    width  400px  x000D    background   000  x000D    font-size  18px  x000D    font-style  oblique  x000D    color   FFF  x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D       vertically aligns items    x000D    align-items  center  x000D       horizontally aligns items    x000D    x000D  p   x000D    margin  5px  x000D      x000D   lt div class  box  gt  x000D     lt p gt  x000D      When flex-direction is column    x000D     lt  p gt  x000D     lt p gt  x000D       justify-content  center  - vertically aligns x000D     lt  p gt  x000D     lt p gt  x000D       align-items  center  - horizontally aligns x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes   Also  browser support nowadays is very good  caniuse  For cross-browser compatibility for display  flex and align-items  you can use the following   display  -webkit-box  display  -webkit-flex  display  -moz-box  display  -ms-flexbox  display  flex  -webkit-flex-align  center  -ms-flex-align  center  -webkit-align-items  center  align-items  center

User · Answer

Try the transform property    x000D   x000D    box   x000D    height  90px  x000D    width  270px  x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    x000D    lt div Id  box  gt  x000D      Lorem ipsum dolor sit amet  consectetur adipiscing elit  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The simple and versatile way is  as Michielvoo s table approach     ctrv       display table  important      ctrv   gt        adressing direct discendents          display  table-cell        vertical-align  middle           text-align  center     optional        Using this attribute  or a equivalent class  on a parent tag works even for many children to align    lt parent ctrv gt    lt ch1  gt    lt ch2  gt     lt  parent gt

User · Answer

You can use the following code snippet as the reference  It is working like a charm for me    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  de  gt  x000D       lt head gt  x000D           lt title gt Vertically Center Text lt  title gt  x000D           lt style gt  x000D          html  body   x000D              height  100   x000D              margin  0  x000D              padding  0  x000D              width  100   x000D            x000D          body   x000D              display  table  x000D            x000D           centered-text   x000D              text-align  center  x000D              display  table-cell  x000D              vertical-align  middle  x000D            x000D           lt  style gt  x000D       lt  head gt  x000D       lt body style  background  3cedd5  gt  x000D           lt div class  centered-text  gt  x000D               lt h1 gt Yes  it s my landing page lt  h1 gt  x000D               lt h2 gt Under construction  coming soon    lt  h2 gt  x000D           lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    The output of the above code snippet is as follow

User · Answer

Here is working code    x000D   x000D  body  x000D    margin 0  x000D    x000D  div   x000D    height  80px  x000D    background   171717  x000D    font-size  24px  x000D    text-align  center  x000D    font-style  normal  x000D    color   FFF  x000D    margin-top  18px  x000D    margin-left  4px  x000D    line-height  80px  x000D    x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D     lt head gt  x000D       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D       lt title gt Align text vertically center in div using CSS lt  title gt  x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt div gt  x000D         lt span gt  lt a class  btn  href  http   ownanswers com   x000D                 rel  dofollow  gt OwnAnswers com lt  a gt  x000D         lt  span gt  x000D        For asking your questions  visit this site  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Result

User · Answer

A better  easier  responsive approach is to set margin-top in CSS to around 45    margin-top  45     You might have to play with that number  but it will be in the center of the surrounding div

User · Answer

There is a tiny magic with CSS3 flexboxes    x000D   x000D     Important    x000D  section   x000D      display  flex  x000D      display  -webkit-flex  x000D    x000D  p   x000D         Key Part    x000D      margin  auto  x000D    x000D   x000D   x000D     Unimportant  coloring and UI    x000D  section   x000D      height  200px  x000D      width  60   x000D      margin  auto  x000D      border-radius  20px  x000D      border  3px solid orange  x000D      background-color  gold  x000D    x000D  p   x000D      text-align  center  x000D      font-family  Cantarell  Calibri  x000D      font-size  15px  x000D      background-color  yellow  x000D      border-radius  20px  x000D      padding  15px  x000D    x000D   lt section gt  x000D       lt p gt  x000D          I m a centered box  lt br  gt  x000D          Flexboxes are great  x000D       lt  p gt  x000D   lt  section gt  x000D   x000D   x000D    Tip  Replace the line above marked as  Key Part  with one of these lines  if you want to center the text    Only vertically   margin  auto 0   Only horizontally   margin  0 auto     As I noticed  this trick works with grids  i e  display  grid   also

User · Answer

I m not sure anyone has gone the writing-mode route  but I think it solves the problem cleanly and has broad support    x000D   x000D   vertical   x000D      border  1px solid green  x000D    writing-mode  vertical-lr  x000D    text-align  center  x000D    height  100   x000D    width  100   x000D    x000D   horizontal   x000D      border  1px solid blue  x000D    display  inline-block  x000D    writing-mode  horizontal-tb  x000D    width  100   x000D    text-align  center  x000D    x000D   content   x000D    text-align  left  x000D    display  inline-block  x000D    border  1px solid  e0e0e0  x000D    padding   5em 1em  x000D    border-radius  1em  x000D    x000D   lt div class  vertical  gt  x000D     lt div class  horizontal  gt  x000D       lt div class  content  gt  x000D        I m centered in the vertical and horizontal thing x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This will  of course  work with any dimensions you need  besides 100  of the parent   If you uncomment the border lines  it ll be helpful to familiarize yourself   JSFiddle demo for you to fiddle   Caniuse support  85 22    6 26    91 48   even Internet nbsp Explorer is in

User · Answer

The following code will put the div in the middle of the screen regardless of screen size or div size    x000D   x000D   center-screen   x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    align-items  center  x000D    text-align  center  x000D    min-height  100vh  x000D    x000D    lt html gt  x000D    lt head gt  x000D    lt  head gt  x000D    lt body gt  x000D    lt div class  center-screen  gt  x000D   I m in the center x000D    lt  div gt  x000D    lt  body gt  x000D    lt  html gt  x000D   x000D   x000D    See more details about flex here

User · Answer

All credit goes to this link owner  Sebastian Ekstr  m Link  please go through this  See it in action codepen  By reading the above article I also created a demo fiddle   With just three lines of CSS  excluding vendor prefixes  we can do it with the help of a transform  translateY vertically centers whatever we want  even if we don   t know its height   The CSS property transform is usually used for rotating and scaling elements  but with its translateY function we can now vertically align elements  Usually this must be done with absolute positioning or setting line-heights  but these require you to either know the height of the element or only works on single-line text  etc   So  to do this we write    element       position  relative      top  50       transform  translateY -50         That   s all you need  It is a similar technique to the absolute-position method  but with the upside that we don   t have to set any height on the element or position-property on the parent  It works straight out of the box  even in Internet nbsp Explorer nbsp 9   To make it even more simple  we can write it as a mixin with its vendor prefixes

User · Answer

Try this solution    x000D   x000D   EXTENDER   x000D      position  absolute  x000D      top  0px  x000D      left  0px  x000D      bottom  0px  x000D      right  0px  x000D      width  100   x000D      height  100   x000D      overflow-y  hidden  x000D      overflow-x  hidden  x000D    x000D   x000D   PADDER-CENTER   x000D      width  100   x000D      height  100   x000D      display  -webkit-box  x000D      display  -moz-box  x000D      display  -ms-flexbox  x000D      display  -webkit-flex  x000D      display  flex  x000D      -webkit-box-pack  center  x000D      -moz-box-pack  center  x000D      -ms-flex-pack  center  x000D      -webkit-justify-content  center  x000D      justify-content  center  x000D      -webkit-box-align  center  x000D      -moz-box-align  center  x000D      -ms-flex-align  center  x000D      -webkit-align-items  center  x000D      align-items  center  x000D    x000D   lt div class  EXTENDER  gt  x000D     lt div class  PADDER-CENTER  gt  x000D       lt div contentEditable  true  gt Edit this text    lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Built using CSS

User · Answer

You can easily do this by adding the following piece of CSS code   display  table-cell  vertical-align  middle    That means your CSS finally looks like    x000D   x000D   box   x000D    height  90px  x000D    width  270px  x000D    background   000  x000D    font-size  48px  x000D    font-style  oblique  x000D    color   FFF  x000D    text-align  center  x000D    margin-top  20px  x000D    margin-left  5px  x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt div id  box  gt  x000D    Some text x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For all your vertical alignment needs   Declare this Mixin    mixin vertical-align  position  relative      position   position    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        Then include it in your element    element       include vertical-align

User · Answer

Another way   Don t set the height attribute of the div  but instead use padding  to achieve the effect  Similarly to line-height  it only works if you have one line of text   Although this way  if you have more content  the text will still be centered  but the div itself will be slightly larger   So instead of going with   div     height  120px    line-height  120px      You can say   div      padding  60px 0     Maybe 60 minus font-size divided by two  if you want to be exact     This will set the top and bottom padding of the div to 60px  and the left and right padding to zero  making the div 120 pixels  plus the height of your font  high  and placing the text vertically centered in the div

User · Answer

This works perfectly   You have to use table style for the div and center align for the content

User · Answer

Wherever you want vertically center style means you can try display table-cell and vertical-align middle   Example    x000D   x000D   box x000D    x000D    display  table-cell  x000D    vertical-align  middle  x000D    height  90px  x000D    width  270px  x000D    background   000  x000D    font-size  48px  x000D    font-style  oblique  x000D    color   FFF  x000D    text-align  center  x000D    margin-top  20px  x000D    margin-left  5px  x000D    x000D   lt div Id  box  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt         main          height 450px          background  f8f8f8          display  -ms-flexbox          display  -webkit-flex          display  flex          -ms-flex-align  center          -webkit-box-align  center          align-items  center          justify-content  center          width  100                lt  style gt     lt  head gt     lt body gt       lt div class  main  gt         lt h1 gt Hello lt  h1 gt       lt  div gt     lt  body gt   lt  html gt

[html] How do I vertically center text with CSS?

HTML

CSS

Result

Examples related to html

Examples related to css

Examples related to vertical-alignment