How do I center content in a div using CSS

Question

How do I center content in a div both horizontally and vertically

User · Answer

with all the adjusting css  if possible  wrap it with a table with height and width as 100  and td set it to vertical align to middle  text-align to center

User · Answer

By using transform  works like a charm    lt div class  parent  gt       lt span gt center content using transform lt  span gt       lt  div gt         CSS      parent           position  relative          height  200px          border  1px solid             parent span           position  absolute          top  50           left  50           -webkit-transform  translate -50   -50            transform  translate -50   -50

User · Answer

To align horizontally it s pretty straight forward        lt style type  text css  gt   body        margin  0       padding  0      text-align  center     bodyclass  container        width     px    SET your width here       margin  0 auto      text-align  left      lt  style gt   lt body class  bodyclass   gt   lt div id  container  gt type your content here lt  div gt   lt  body gt    and for vertical align  it s a bit tricky   here s the source       lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN  gt   lt html gt   lt head gt     lt title gt Universal vertical center with CSS lt  title gt     lt style gt       greenBorder  border  1px solid green      just borders to see it       lt  style gt   lt  head gt    lt body gt     lt div class  greenBorder  style  display  table  height  400px   position  relative  overflow  hidden   gt       lt div style    position  absolute   top  50  display  table-cell  vertical-align  middle   gt         lt div class  greenBorder  style    position  relative   top  -50   gt          any text lt br gt          any height lt br gt          any content  for example generated from DB lt br gt          everything is vertically centered        lt  div gt       lt  div gt     lt  div gt   lt  body gt   lt  html gt

User · Answer

Update 2020  There are several options available     Disclaimer  This list may not be complete   Using Flexbox Nowadays  we can use flexbox  It is quite a handy alternative to the css-transform option  I would use this solution almost always  If it is just one element maybe not  but for example if I had to support an array of data e g  rows and columns and I want them to be relatively centered in the very middle   x000D   x000D   flexbox     display  flex    height  100px    flex-flow  row wrap    align-items  center    justify-content  center    background-color   eaeaea    border  1px dotted  333      item        default   gt  flex  0 1 auto      background-color   fff    border  1px dotted  333    box-sizing  border-box    x000D   lt div class  flexbox  gt     lt div class  item  gt I am centered in the middle  lt  div gt     lt div class  item  gt I am centered in the middle  too  lt  div gt   lt  div gt  x000D   x000D   x000D    Using CSS 2D-Transform This is still a good option  was also the accepted solution back in 2015  It is very slim and simple to apply and does not mess with the layouting of other elements   x000D   x000D   boxes     position  relative      box     position  relative    display  inline-block    float  left    width  200px    height  200px    font-weight  bold    color   333    margin-right  10px    margin-bottom  10px    background-color   eaeaea      h-center     text-align  center      v-center span     position  absolute    left  0    right  0    top  50     transform  translate 0  -50      x000D   lt div class  boxes  gt     lt div class  box h-center  gt horizontally centered lorem ipsun dolor sit amet lt  div gt     lt div class  box v-center  gt  lt span gt vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet lt  span gt  lt  div gt     lt div class  box h-center v-center  gt  lt span gt horizontally and vertically centered lorem ipsun dolor sit amet lt  span gt  lt  div gt   lt  div gt  x000D   x000D   x000D    Note  This does also work with  after and  before pseudo-elements    Using Grid This might just be an overkill  but it depends on your DOM  If you want to use grid anyway  then why not  It is very powerful alternative and you are really maximum flexible with the design   Note  To align the items vertically we use flexbox in combination with grid  But we could also use display  grid on the items    x000D   x000D   grid     display  grid    width  400px    grid-template-rows  100px    grid-template-columns  100px 100px 100px    grid-gap  3px    align-items  center    justify-content  center    background-color   eaeaea    border  1px dotted  333      item     display  flex    justify-content  center    align-items  center    border  1px dotted  333    box-sizing  border-box      item-large     height  80px    x000D   lt div class  grid  gt     lt div class  item  gt Item 1 lt  div gt     lt div class  item item-large  gt Item 2 lt  div gt     lt div class  item  gt Item 3 lt  div gt   lt  div gt  x000D   x000D   x000D    Further reading  CSS article about grid CSS article about flexbox CSS article about centering without flexbox or grid

[css] How do I center content in a div using CSS?

Examples related to css