How to horizontally center an element

Question

How can I horizontally center a  lt div gt  within another  lt div gt  using CSS   lt div id  quot outer quot  gt     lt div id  quot inner quot  gt Foo foo lt  div gt   lt  div gt

User · Answer

Here is another way to center horizontally using Flexbox and without specifying any width to the inner container. The idea is to use pseudo elements that will push the inner content from the right and the left.

Using flex:1 on pseudo element will make them fill the remaining spaces and take equal size and the inner container will get centered.

_x000D_

.container {_x000D_
  display: flex;_x000D_
  border: 1px solid;_x000D_
}_x000D_
_x000D_
.container:before,_x000D_
.container:after {_x000D_
  content: "";_x000D_
  flex: 1;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
  border: 1px solid red;_x000D_
  padding: 5px;_x000D_
}

_x000D_

<div class="container">_x000D_
  <div class="inner">_x000D_
    Foo content_x000D_
  </div>_x000D_
</div>

_x000D_

We can also consider the same situation for vertical alignment by simply changing the direction of flex to column:

_x000D_

.container {_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
  border: 1px solid;_x000D_
  min-height: 200px;_x000D_
}_x000D_
_x000D_
.container:before,_x000D_
.container:after {_x000D_
  content: "";_x000D_
  flex: 1;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
  border: 1px solid red;_x000D_
  padding: 5px;_x000D_
}

_x000D_

<div class="container">_x000D_
  <div class="inner">_x000D_
    Foo content_x000D_
  </div>_x000D_
</div>

_x000D_

User · Answer

CSS 3   You can use the following style on the parent container to distribute child elements evenly horizontally   display  flex  justify-content  space-between       lt -- space-between or space-around   A nice DEMO regarding the different values for justify-content     CanIUse  Browser-Compatability  Try it     x000D   x000D   containerdiv   x000D    display  flex  x000D    justify-content  space-between  x000D    x000D   x000D   containerdiv  gt  div   x000D    background-color  blue  x000D    width  50px  x000D    color  white  x000D    text-align  center  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt JS Bin lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt div id  containerdiv  gt  x000D       lt div gt 88 lt  div gt  x000D       lt div gt 77 lt  div gt  x000D       lt div gt 55 lt  div gt  x000D       lt div gt 33 lt  div gt  x000D       lt div gt 40 lt  div gt  x000D       lt div gt 45 lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use CSS Flexbox    inner       display  flex      justify-content  center      You can learn more about it on this link  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

This will surely center your  inner both horizontally and vertically  This is also compatible in all browsers  I just added extra styling just to show how it is centered    x000D   x000D   outer   x000D    background  black  x000D    position  relative  x000D    width 150px  x000D    height 150px  x000D    x000D   x000D   inner    x000D    background white  x000D    position  absolute  x000D    left 50   x000D    top  50   x000D    transform  translate -50  -50    x000D    -webkit-transform  translate -50  -50    x000D    -moz-transform  translate -50  -50     x000D    -o-transform  translate -50  -50    x000D     x000D   lt div id  outer  gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But of course if you only want it horizontally aligned  This may help you    x000D   x000D   outer   x000D    background  black  x000D    position  relative  x000D    width 150px  x000D    height 150px  x000D    x000D   x000D   inner    x000D    background white  x000D    position  absolute  x000D    left 50   x000D    transform  translate -50  0   x000D    -webkit-transform  translate -50  0   x000D    -moz-transform  translate -50  0    x000D    -o-transform  translate -50  0   x000D     x000D   lt div id  outer  gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The main attributes for centering the div are margin  auto and width  according to requirements    DivCenter      width  50       margin  auto      border  3px solid  000      padding  10px

User · Answer

I recently found an approach    outer       position  absolute      left  50       inner       position  relative      left  -50       Both elements must be the same width to function correctly

User · Answer

Another solution for this without having to set a width for one of the elements is using the CSS 3 transform attribute    outer     position  relative      inner     position  absolute    left  50      transform  translateX -50        The trick is that translateX -50   sets the  inner element 50 percent to the left of its own width  You can use the same trick for vertical alignment   Here s a Fiddle showing horizontal and vertical alignment   More information is on Mozilla Developer Network

User · Answer

You can use the calc method  The usage is for the div you re centering  If you know its width  let s say it s 1200 nbsp pixels  go for    container       width 1200px      margin-left  calc 50  - 600px       So basically it ll add a left margin of 50  minus half the known width

User · Answer

Some posters have mentioned the CSS nbsp 3 way to center using display box   This syntax is outdated and shouldn t be used anymore   See also this post    So just for completeness here is the latest way to center in CSS nbsp 3 using the Flexible Box Layout Module   So if you have simple markup like    lt div class  box  gt     lt div class  item1  gt A lt  div gt     lt div class  item2  gt B lt  div gt     lt div class  item3  gt C lt  div gt   lt  div gt       and you want to center your items within the box  here s what you need on the parent element   box     box       display  flex      flex-wrap  wrap     Optional  only if you want the items to wrap        justify-content  center     For horizontal alignment        align-items  center     For vertical alignment         x000D   x000D   box   x000D    display  flex  x000D    flex-wrap  wrap  x000D       Optional  only if you want the items to wrap    x000D    justify-content  center  x000D       For horizontal alignment    x000D    align-items  center  x000D       For vertical alignment    x000D    x000D      x000D    margin  0  x000D    padding  0  x000D    x000D  html  x000D  body   x000D    height  100   x000D    x000D   box   x000D    height  200px  x000D    display  flex  x000D    flex-wrap  wrap  x000D    justify-content  center  x000D    align-items  center  x000D    border  2px solid tomato  x000D    x000D   box div   x000D    margin  0 10px  x000D    width  100px  x000D    x000D   item1   x000D    height  50px  x000D    background  pink  x000D    x000D   item2   x000D    background  brown  x000D    height  100px  x000D    x000D   item3   x000D    height  150px  x000D    background  orange  x000D    x000D   lt div class  box  gt  x000D     lt div class  item1  gt A lt  div gt  x000D     lt div class  item2  gt B lt  div gt  x000D     lt div class  item3  gt C lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you need to support older browsers which use older syntax for flexbox here s a good place to look

User · Answer

I m sorry but this baby from the 1990s just worked for me    lt div id  outer  gt       lt center gt Foo foo lt  center gt   lt  div gt    Am I going to hell for this sin

User · Answer

We could use the next CSS s class which allow center vertically and horizontally any element against its parent    centerElement    position  absolute    top  50     left  50     transform  translate -50   -50

User · Answer

lt center gt    I am spoiled with the most simple center known    lt  center gt

User · Answer

outer       text-align  center      width  100

User · Answer

It cannot be centered if you don t give it a width  Otherwise  it will take  by default  the whole horizontal space

User · Answer

I found a similar way with margin-left  but it can be left as well    inner       width  100       max-width  65px     To adapt to screen width  It can be whatever you want         left  65px     This has to be approximately the same as the max-width

User · Answer

For example  see this link and the snippet below    x000D   x000D  div outer   x000D    height  120px  x000D    background-color  red  x000D    x000D   x000D  div inner   x000D    width  50   x000D    height  100   x000D    background-color  green  x000D    margin  0 auto  x000D    text-align  center     For text alignment to center horizontally     x000D    line-height  120px     For text alignment to center vertically     x000D    x000D   lt div id  outer  style  width 100    gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you have a lot of children under a parent  so your CSS content must be like this example on fiddle   The HTML content look likes this    lt div id  outer  style  width 100    gt       lt div class  inner  gt  Foo Text  lt  div gt       lt div class  inner  gt  Foo Text  lt  div gt       lt div class  inner  gt  Foo Text  lt  div gt       lt div class  inner  gt   lt  div gt       lt div class  inner  gt   lt  div gt       lt div class  inner  gt   lt  div gt       lt div class  inner  gt   lt  div gt       lt div class  inner  gt   lt  div gt       lt div class  inner  gt  Foo Text  lt  div gt   lt  div gt    Then see this example on fiddle

User · Answer

One option existed that I found   Everybody says to use   margin  auto 0    But there is another option  Set this property for the parent div  It works perfectly anytime   text-align  center    And see  child go center   And finally CSS for you    outer       text-align  center       display  block     Or inline-block - base on your need        inner        position  relative       margin  0 auto     It is good to be

User · Answer

First of all  You need to give a width to the second div   For example   HTML   lt div id  outter  gt       lt div id  inner Centered content  gt       lt  div  lt  div gt    CSS     inner       width  50        margin  auto      Note that if you don t give it a width  it will take the whole width of the line

User · Answer

outer  postion  relative   inner       width  100px       height  40px       position  absolute      top  50       margin-top  -20px     Half of your height

User · Answer

HTML    lt div id  outer  gt     lt div id  inner  gt     lt  div gt   lt  div gt    CSS    outer    width  500px    background-color   000    height  500px    inner    background-color   333    margin  0 auto    width  50     height  250px      Fiddle

User · Answer

Make it simple    x000D   x000D   outer   x000D    display  flex  x000D    justify-content  center  x000D    x000D   lt div id  outer  gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use display  flex for your outer div and to horizontally center you have to add justify-content  center   outer      display  flex      justify-content  center      or you can visit w3schools - CSS flex Property for more ideas

User · Answer

Add text-align center  to parent div     outer       text-align  center      https   jsfiddle net 7qwxx9rs   or    outer  gt  div       margin  auto      width  100px      https   jsfiddle net f8su1fLz

User · Answer

Here is what you want in the shortest way    JSFIDDLE   outer       margin - top  100 px      height  500 px     you can set whatever you want        border  1 px solid  ccc      inner       border  1 px solid  f00      position  relative      top  50         transform  translateY -50

User · Answer

It can also be centered horizontally and vertically using absolute positioning  like this    outer      position  relative      inner      position  absolute      left  50       top  50       transform  translate -50   -50

User · Answer

If you have a parent of some height say  body height  200px  or like the below has parent div outer with height 200px  then add CSS content as below  HTML    lt div id  outer  gt     lt div id  centered  gt Foo foo lt  div gt   lt  div gt    CSS    outer    display  flex    width  100     height  200px     centered     margin  auto      Then child content  say div centered content  will be vertically or horizontally middle  without using any position CSS  To remove vertically middle behavior then just modify to below CSS code    centered     margin  0px auto      or   outer    display  flex    width  100     height  200px     centered     margin  auto      lt div id  outer  gt     lt div id  centered  gt Foo foo lt  div gt   lt  div gt    Demo  https   jsfiddle net jinny p3x5jb81 5   To add only a border to show the inner div is not 100  by default    x000D   x000D   outer  x000D    display  flex  x000D    width  100   x000D    height  200px  x000D    border  1px solid  000000  x000D    x000D   centered   x000D    margin  auto  x000D    border  1px solid  000000  x000D    x000D   lt div id  outer  gt  x000D     lt div id  centered  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    DEMO  http   jsfiddle net jinny p3x5jb81 9

User · Answer

CSS justify-content property It aligns the Flexbox items at the center of the container   outer       display  flex      justify-content  center

User · Answer

CSS nbsp 3 s box-align property   outer       width  100       height  100       display  box      box-orient  horizontal      box-pack  center      box-align  center

User · Answer

You can do something like this   container      display  table     width   lt width of your container gt      height   lt height of your container gt       inner      width   lt width of your center div gt      display  table-cell     margin  0 auto     text-align  center     vertical-align  middle      This will also align the  inner vertically  If you don t want to  remove the display and vertical-align properties

User · Answer

You can use the link https   plnkr co edit MQD5QHJe5oUVKEvHCz8p p preview   outer        display  table        width  100         height  100      inner       vertical-align  middle      Refer to https   v4-alpha getbootstrap com examples cover

User · Answer

You can add this code    x000D   x000D   inner   x000D    width  90   x000D    margin  0 auto  x000D    text-align center  x000D    x000D   lt div id  outer  gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The easiest answer  Add margin auto  to inner    lt div class  outer  gt     lt div class  inner  gt      Foo foo    lt  div gt   lt  div gt    CSS code   outer      width  100       height  300px      background  yellow      inner      width  30       height  200px      margin  auto      background  red      text-align  center     Check my CodePen link  http   codepen io feizel pen QdJJrK

User · Answer

This centralizes your inner div horizontally and vertically    outer      display  flex     inner      margin  auto      For only horizontal align  change  margin  0 auto    and for vertical  change  margin  auto 0

User · Answer

x000D   x000D   inner   x000D    display  table  x000D    margin  0 auto  x000D    x000D   lt div id  outer  style  width 100   gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To align a div within a div in middle -  x000D   x000D   outer    width  300px     For example      height  300px     For example      background  red     inner    position  relative    top  50     left  50     transform  translate -50   -50      width  200px    height  200px    background  yellow    x000D   lt body gt     lt div class  outer  gt       lt div class  inner  gt  lt  div gt     lt  div gt   lt  body gt  x000D   x000D   x000D   This will align the internal div in the middle  both vertically and horizontally

User · Answer

x000D   x000D   outer   x000D    width  160px  x000D    padding  5px  x000D    border-style  solid  x000D    border-width  thin  x000D    display  block  x000D    x000D   x000D   inner   x000D    margin  auto  x000D    background-color  lightblue  x000D    border-style  solid  x000D    border-width  thin  x000D    width  80px  x000D    padding  10px  x000D    text-align  center  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In the previous examples they used margin  0 auto  display table and other answers used  quot with transform and translate quot   And what about just with a tag  Everyone knows there is a  lt center gt  tag which is just not supported by HTML5  But it works in HTML5  For instance  in my old projects  And it is working  but now not only MDN Web Docs  but other websites are advising not to use it any more  Here in Can I use you can see notes from MDN Web Docs  But whatever  there is such a way  This is just to know  Always being noticed about something is so useful

User · Answer

Chris Coyier who wrote an excellent post on  Centering in the Unknown  on his blog  It s a roundup of multiple solutions  I posted one that isn t posted in this question  It has more browser support than the Flexbox solution  and you re not using display  table  which could break other things      This parent can be any width and height     outer     text-align  center        The ghost  nudged to maintain perfect centering     outer before     content         display  inline-block    height  100     vertical-align  middle    width  0    overflow  hidden        The element to be centered  can    also be of any width and height     inner     display  inline-block    vertical-align  middle    width  300px

User · Answer

You can do it in a different way  See the below examples   1  First Method  outer      text-align  center     width  100      inner      display  inline-block      2  Second method  outer     position  relative    overflow  hidden     centered      position  absolute     left  50

User · Answer

Flex have more than 97  browser support coverage and might be the best way to solve these kind of problems within few lines    outer     display  flex    justify-content  center

User · Answer

Center a div in a div   x000D   x000D   outer   x000D    display  -webkit-flex  x000D    display  flex  x000D   x000D      -webkit-justify-content  center         x000D      justify-content  center  x000D     x000D      align-items  center  x000D   x000D    width  100   x000D    height  100px  x000D    background-color  lightgrey  x000D    x000D   x000D   inner   x000D    background-color  cornflowerblue  x000D    padding  2rem  x000D    margin  auto    x000D     x000D      align-self  center        x000D    x000D   lt div class  outer  gt    x000D     lt div class  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Flexbox Center Horizontally and Vertically Center Align an Element  x000D   x000D   wrapper  border  1px solid  678596  max-width  350px  margin  30px auto            parentClass   display  flex  justify-content  center  align-items  center  height  300px           parentClass div  margin  5px  background   678596  width  50px  line-height  50px  text-align  center  font-size  30px  color   fff   x000D   lt h1 gt Flexbox Center Horizontally and Vertically Center Align an Element lt  h1 gt   lt h2 gt justify-content  center  align-items  center  lt  h2 gt    lt div class  wrapper  gt    lt div class  parentClass  gt     lt div gt c lt  div gt   lt  div gt    lt  div gt  x000D   x000D   x000D

User · Answer

Add CSS to your inner div  Set margin  0 auto and set its width less than 100   which is the width of the outer div    lt div id  outer  style  width 100   gt        lt div id  inner  style  margin 0 auto width 50   gt Foo foo lt  div gt    lt  div gt    This will give the desired result

User · Answer

If anyone would like a jQuery solution for center align these divs     window  bind  load   function         var wwidth       outer   width        var width       inner   width            inner   attr  style    padding-left      wwidth   2    px  margin-left  -    width   2    px

User · Answer

The best known way which is used widely and work in many browsers including the old ones   is using margin as below    x000D   x000D   parent   x000D    width  100   x000D    background-color   CCCCCC  x000D    x000D   x000D   child   x000D    width  30      We need the width    x000D    margin  0 auto     This does the magic    x000D    color   FFFFFF  x000D    background-color   000000  x000D    padding  10px  x000D    text-align  center  x000D    x000D   lt div id  parent  gt  x000D     lt div id  child  gt I m the child and I m horizontally centered  My daddy is a greyish div dude  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Run the code to see how it works  Also  there are two important things you shouldn t forget in your CSS when you try to center this way  margin  0 auto   That makes it the div center as wanted  Plus don t forget width of the child  otherwise it won t get centered as expected

User · Answer

One of the easiest ways      lt  DOCTYPE html gt   lt html gt       lt head gt           lt style gt               outer-div                   width  100                   text-align  center                  background-color   000                            inner-div                   display  inline-block                  margin  0 auto                  padding  3px                  background-color   888                        lt  style gt       lt  head gt        lt body gt          lt div id   outer-div  width  100   gt              lt div id   inner-div  gt  I am a easy horizontally centered div  lt  div gt          lt div gt       lt  body gt   lt  html gt

User · Answer

Suppose that your div is 200 pixels wide    centered     position  absolute    left  50     margin-left  -100px      Make sure the parent element is positioned  i e   relative  fixed  absolute  or sticky   If you don t know the width of your div  you can use transform translateX -50    instead of the negative margin   https   jsfiddle net gjvfxxdj   With CSS calc    the code can get even simpler       centered     width  200px    position  absolute    left  calc 50  - 100px       The principle is still the same  put the item in the middle and compensate for the width

User · Answer

I just use the simplest solution  but it works in all browsers    lt  doctype html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt title gt center a div within a div  lt  title gt           lt style type  text css  gt                                 margin  0                  padding  0                              outer                  width  80                   height  500px                  background-color   003                  margin  0 auto                              outer p                  color   FFF                  text-align  center                              inner                  background-color   901                  width  50                   height  100px                  margin  0 auto                               inner p                  color   FFF                  text-align  center                         lt  style gt       lt  head gt        lt body gt           lt div id  outer  gt  lt p gt this is the outer div lt  p gt               lt div id  inner  gt                   lt p gt this is the inner div lt  p gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

x000D   x000D   lt div id  outer  style  width 100  margin  0 auto  text-align  center   gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

div      width  100px      height  100px      margin  0 auto      For the normal thing if you are using div in a static way   If you want a div to be centered when div is absolute to its parent  here is example    parentdiv      position  relative      height  500px      child div     position  absolute     height  200px     width  500px     left  0     right  0     margin  0 auto

User · Answer

inner     width  50     margin  0 auto

User · Answer

Set the width and set margin-left and margin-right to auto  That s for horizontal only  though  If you want both ways  you d just do it both ways  Don t be afraid to experiment  it s not like you ll break anything

User · Answer

You can do it by using Flexbox which is a good technique these days   For using Flexbox you should give display  flex  and align-items  center  to your parent or  outer div element  The code should be like this    x000D   x000D   outer   x000D    display  flex  x000D    align-items  center  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This should center your child or  inner div horizontally  But you can t actually see any changes  Because our  outer div has no height or in other words  its height is set to auto  so it has the same height as all of its child elements  So after a little of visual styling  the result code should be like this    x000D   x000D   outer   x000D    height  500px  x000D    display  flex  x000D    align-items  center  x000D    background-color  blue  x000D    x000D   x000D   inner   x000D    height  100px  x000D    background  yellow  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You can see  inner div is now centered  Flexbox is the new method of positioning elements in horizontal or vertical stacks with CSS and it s got 96  of global browsers compatibility  So you are free to use it and if you want to find out more about Flexbox visit CSS-Tricks article  That is the best place to learn using Flexbox in my opinion

User · Answer

One of the easiest ways you can do it is by using display  flex  The outer div just needs to have display flex  and the inner needs margin  0 auto to make it centered horizontally   To center vertically and just center a div within another div  please look at the comments of the  inner class below   x000D   x000D   wrapper   x000D    display  flex  x000D       Adding whatever height  amp  width we want    x000D    height  300px  x000D    width  300px  x000D       Just so you can see it is centered    x000D    background  peachpuff  x000D    x000D   x000D   inner   x000D       center horizontally    x000D    margin  0 auto  x000D       center vertically    x000D       margin  auto 0     x000D       center    x000D       margin  0 auto     x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  inner  gt  x000D      I am horizontally  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A very simple and cross-browser answer to horizontal center is to apply this rule to the parent element    parentBox       display  flex      justify-content  center

User · Answer

Just simply Margin 0px auto    x000D   x000D   inner  x000D    display  block  x000D    margin  0px auto  x000D    width  100px  x000D    x000D   lt div id  outer  style  width 100   gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   outer    display  grid   justify-content  center     x000D   lt div id  outer  gt     lt div id  inner  gt hello lt  div gt   lt  div gt  x000D   x000D   x000D  enter code here

User · Answer

Try this   lt div style  quot position  absolute left  50  top  50  -webkit-transform  translate -50   -50   transform  translate -50   -50    quot  gt  lt div gt Foo foo lt  div gt  lt  div gt

User · Answer

Use the below CSS content for  inner div    inner     width  50     margin-left  25       I mostly use this CSS content to center divs

User · Answer

After reading all the answers I did not see the one I prefer  This is how you can center an element in another    jsfiddle - http   jsfiddle net josephtveter w3sksu1w     lt p gt Horz Center lt  p gt   lt div class  outterDiv  gt       lt div class  innerDiv horzCenter  gt  lt  div gt   lt  div gt   lt p gt Vert Center lt  p gt   lt div class  outterDiv  gt       lt div class  innerDiv vertCenter  gt  lt  div gt   lt  div gt   lt p gt True Center lt  p gt   lt div class  outterDiv  gt       lt div class  innerDiv trueCenter  gt  lt  div gt   lt  div gt   vertCenter       position  absolute      top 50       -ms-transform  translateY -50        -moz-transform  translateY -50        -webkit-transform  translateY -50        transform  translateY -50        horzCenter       position  absolute      left  50       -ms-transform  translateX -50        -moz-transform  translateX -50        -webkit-transform  translateX -50        transform  translateX -50        trueCenter       position  absolute      left  50       top  50       -ms-transform  translate -50   -50        -moz-transform  translate -50   -50        -webkit-transform  translate -50   -50        transform  translate -50   -50        outterDiv       position  relative      background-color  blue      width  10rem      height  10rem      margin  2rem     innerDiv       background-color  red      width  5rem      height  5rem

User · Answer

lt div id  outer  style  width 100   gt       lt div id  inner  style  text-align center  gt Foo foo lt  div gt   lt  div gt

User · Answer

If you don t want to set a fixed width on the inner div you could do something like this    x000D   x000D   outer   x000D    width  100   x000D    text-align  center  x000D    x000D   x000D   inner   x000D    display  inline-block  x000D    x000D   lt div id  outer  gt    x000D       lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    That makes the inner div into an inline element that can be centered with text-align

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt title gt Center lt  title gt  x000D       lt style gt  x000D       outer  x000D            text-align  center  x000D               x000D       inner  x000D            width  500px  x000D            margin  0 auto  x000D            background  brown  x000D            color  red  x000D        x000D   x000D   lt  style gt  x000D   x000D     lt  head gt  x000D   x000D     lt body gt  x000D   x000D       lt div class  outer  gt  x000D         lt div class  inner  gt This DIV is centered lt  div gt  x000D       lt  div gt  x000D   x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Please try this  It will work without the HTML center tag

User · Answer

For a horizontally centered DIV    outer     width  100     text-align  center     inner     display  inline-block       lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt

User · Answer

Text-align  center Applying text-align  center the inline contents are centered within the line box  However since the inner div has by default width  100  you have to set a specific width or use one of the following   display  block display  inline display  inline-block   x000D   x000D   inner     display  inline-block      outer     text-align  center    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D    Margin  0 auto Using margin  0 auto is another option and it is more suitable for older browsers compatibility  It works together with display  table   x000D   x000D   inner     display  table    margin  0 auto    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D    Flexbox display  flex behaves like a block element and lays out its content according to the flexbox model  It works with justify-content  center  Please note  Flexbox is compatible with most of the browsers but not all  See display  flex not working on Internet Explorer for a complete and up to date list of browsers compatibility   x000D   x000D   inner     display  inline-block      outer     display  flex    justify-content  center    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D    Transform transform  translate lets you modify the coordinate space of the CSS visual formatting model  Using it  elements can be translated  rotated  scaled  and skewed  To center horizontally it require position  absolute and left  50    x000D   x000D   inner     position  absolute    left  50     transform  translate -50   0      x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D     lt center gt   Deprecated  The tag  lt center gt  is the HTML alternative to text-align  center  It works on older browsers and most of the new ones but it is not considered a good practice since this feature is obsolete and has been removed from the Web standards   x000D   x000D   inner     display  inline-block    x000D   lt div id  outer  gt     lt center gt       lt div id  inner  gt Foo foo lt  div gt     lt  center gt   lt  div gt  x000D   x000D   x000D

User · Answer

For Firefox and Chrome    x000D   x000D   lt div style  width 100    gt  x000D     lt div style  width  50   margin  0px auto   gt Text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    For Internet nbsp Explorer  Firefox  and Chrome    x000D   x000D   lt div style  width 100   text-align center   gt  x000D     lt div style  width  50   margin  0px auto  text-align left   gt Text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The text-align  property is optional for modern browsers  but it is necessary in Internet nbsp Explorer Quirks Mode for legacy browsers support

User · Answer

The easiest way    x000D   x000D   outer   x000D    width  100   x000D    text-align  center  x000D    x000D   inner   x000D    margin  auto  x000D    width  200px  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt Blabla lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is the best example to horizontally center a  lt div    x000D   x000D   outer   x000D      display  flex  x000D      align-items  center  x000D      justify-content  center  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D   x000D       lt  head gt  x000D   x000D       lt body gt  x000D           lt div id  outer  gt  x000D               lt div id  inner  gt Foo foo lt  div gt  x000D           lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

With Sass  SCSS syntax  you can do this with a mixin  With translate    Center horizontal mixin  mixin center-horizontally     position  absolute    left  50     transform  translate -50   -50          Center horizontal class  center-horizontally        include center-horizontally     In an HTML tag   lt div class  quot center-horizontally quot  gt      I m centered   lt  div gt   Remember to add position  relative  to the parent HTML element   With Flexbox Using flex  you can do this   mixin center-horizontally     display  flex    justify-content  center        Center horizontal class  center-horizontally        include center-horizontally     In an HTML tag   lt div class  quot center-horizontally quot  gt       lt div gt I m centered  lt  div gt   lt  div gt   Try this CodePen

User · Answer

This method also works just fine   div container      display  flex     justify-content  center     For horizontal alignment       align-items  center         For vertical alignment          For the inner  lt div gt   the only condition is that its height and width must not be larger than the ones of its container

User · Answer

You can apply this CSS to the inner  lt div gt    inner     width  50     margin  0 auto     Of course  you don t have to set the width to 50   Any width less than the containing  lt div gt  will work  The margin  0 auto is what does the actual centering  If you are targeting Internet  Explorer  8  and later   it might be better to have this instead   inner     display  table    margin  0 auto     It will make the inner element center horizontally and it works without setting a specific width  Working example here   x000D   x000D   inner     display  table    margin  0 auto    border  1px solid black      outer     border  1px solid red    width 100    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D    EDIT With flexbox it is very easy to style the div horizontally and vertically centered   x000D   x000D   inner       border  1px solid black      outer     border  1px solid red    width 100     display  flex    justify-content  center    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D   To align the div vertically centered  use the property align-items  center

User · Answer

You can attain this using the CSS Flexbox  You just need to apply 3 properties to the parent element to get everything working    outer     display  flex    align-content  center    justify-content  center      Have a look at the code below this will make you understand the properties much better   Get to know more about CSS Flexbox   x000D   x000D   outer   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    border  1px solid  ddd  x000D    width  100   x000D    height  200px  x000D     x000D   lt div id  outer  gt    x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can add another div which has the same size of  inner and move it to the left by -50   half of the width of  inner  and  inner by 50     x000D   x000D   inner   x000D      position  absolute  x000D      left  50   x000D    x000D   x000D   inner  gt  div   x000D      position  relative  x000D      left  -50   x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt  lt div gt Foo foo lt  div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I am sharing this answer for the designers who want to align their content both horizontally and vertically  Or you may say in the center of the web page  Please go to this site to download the file  CSS Code  ver-hor-div       display  table-cell      vertical-align  middle      text-align  center

User · Answer

To centre an element horizontally you can look at these 3 methods  Method 1  Using margin  0 auto   margin-left and margin-right is set auto   x000D   x000D   outer     background-color  silver     inner     width  max-content    margin  0 auto    background-color   f07878    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D   Method 2 Using flex box  x000D   x000D   outer     display  flex    justify-content  center    background-color  silver     inner     background-color   f07878    x000D   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D   Method 3 Using center tag  Deprecated   x000D   x000D   outer     background-color  silver     inner     display  inline    background-color   f07878    x000D   lt div id  outer  gt     lt center gt       lt div id  inner  gt Foo foo lt  div gt     lt  center gt   lt  div gt  x000D   x000D   x000D

User · Answer

Use    lt div id  parent  gt     lt div class  child  gt  lt  div gt   lt  div gt    Style    parent      display  flex     justify-content  center      If you want to center it horizontally you should write as below    parent      display  flex     justify-content  center     align-items  center

User · Answer

Use    lt style gt     outer      text-align  center      width  100          inner      text-align  center       lt  style gt

User · Answer

Try playing around with   margin  0 auto    If you want to center your text too  try using   text-align  center

User · Answer

Well  I managed to find a solution that maybe will fit all situations  but uses JavaScript   Here s the structure    lt div class  container  gt     lt div class  content  gt Your content goes here  lt  div gt     lt div class  content  gt Your content goes here  lt  div gt     lt div class  content  gt Your content goes here  lt  div gt   lt  div gt    And here s the JavaScript snippet     document  ready function           container  content   each  function         container     this  closest   container        content     this        containerHeight   container height        contentHeight   content height         margin    containerHeight - contentHeight    2      content css  margin-top   margin              If you want to use it in a responsive approach  you can add the following     window  resize function           container  content   each  function         container     this  closest   container        content     this        containerHeight   container height        contentHeight   content height         margin    containerHeight - contentHeight    2      content css  margin-top   margin

User · Answer

If you don t want to set a fixed width and don t want the extra margin  add display  inline-block to your element   You can use    element       display  table      margin  0 auto

User · Answer

We can use Flexbox to achieve this really easily    lt div id  outer  gt       lt div id  inner  gt Foo foo lt  div gt   lt  div gt    Center a div inside a div horizontally    outer      display  flex     justify-content  center        Center a div inside a div vertically    outer       display  flex      align-items  center        And  to completely middle the div vertically and horizontally    outer      display  flex      justify-content  center      align-items  center

User · Answer

The way I usually do it is using absolute position    inner      left  0      right  0      margin-left  auto      margin-right  auto      position  absolute      The outer div doesn t need any extra propertites for this to work

User · Answer

Instead of multiple wrappers and or auto margins  this simple solution works for me    lt div style  top  50   left  50       height  100px  width  100px      margin-top  -50px  margin-left  -50px      background  url  lib loading gif   no-repeat center  fff      text-align  center      position  fixed  z-index  9002   gt Loading    lt  div gt    It puts the div at the center of the view  vertical and horizontal   sizes and adjusts for size  centers background image  vertical and horizontal   centers text  horizontal   and keeps div in the view and on top of the content  Simply place in the HTML body and enjoy

User · Answer

I recently had to center a  hidden  div  i e   display none   that had a tabled form within it that needed to be centered on the page  I wrote the following jQuery code to display the hidden div and then update the CSS content to the automatic generated width of the table and change the margin to center it    The display toggle is triggered by clicking on a link  but this code wasn t necessary to display    NOTE  I m sharing this code  because Google brought me to this Stack Overflow solution and everything would have worked except that hidden elements don t have any width and can t be resized centered until after they are displayed    x000D   x000D    function    x000D        inner   show   width     innerTable   width    css  margin   0 auto    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  inner  style  display none   gt  x000D     lt form action    gt  x000D       lt table id  innerTable  gt  x000D         lt tr gt  lt td gt Name  lt  td gt  lt td gt  lt input type  text  gt  lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt Email  lt  td gt  lt td gt  lt input type  text  gt  lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt Email  lt  td gt  lt td gt  lt input type  submit  gt  lt  td gt  lt  tr gt  x000D       lt  table gt  x000D     lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have applied the inline style to the inner div  Use this one    lt div id  outer  style  width 100   gt         lt div id  inner  style  display table margin 0 auto   gt Foo foo lt  div gt   lt  div gt

User · Answer

inner       width  50       margin  0 auto

User · Answer

If width of the content is unknown you can use the following method  Suppose we have these two elements     outer -- full width  inner -- no width set  but a max-width could be specified    Suppose the computed width of the elements are 1000 pixels and 300 pixels respectively  Proceed as follows    Wrap  inner inside  center-helper Make  center-helper an inline block  it becomes the same size as  inner making it 300 pixels wide  Push  center-helper 50  right relative to its parent  this places its left at 500 pixels wrt  outer  Push  inner 50  left relative to its parent  this places its left at -150 pixels wrt  center helper which means its left is at 500 - 150   350 pixels wrt  outer  Set overflow on  outer to hidden to prevent horizontal scrollbar    Demo    x000D   x000D  body   x000D    font  medium sans-serif  x000D    x000D   x000D   outer   x000D    overflow  hidden  x000D    background-color  papayawhip  x000D    x000D   x000D   center-helper   x000D    display  inline-block  x000D    position  relative  x000D    left  50   x000D    background-color  burlywood  x000D    x000D   x000D   inner   x000D    display  inline-block  x000D    position  relative  x000D    left  -50   x000D    background-color  wheat  x000D    x000D   lt div class  outer  gt  x000D     lt div class  center-helper  gt  x000D       lt div class  inner  gt  x000D         lt h1 gt A div with no defined width lt  h1 gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt br gt  x000D            Duis condimentum sem non turpis consectetur blandit  lt br gt  x000D            Donec dictum risus id orci ornare tempor  lt br gt  x000D            Proin pharetra augue a lorem elementum molestie  lt br gt  x000D            Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know I m a bit late to answering this question  and I haven t bothered to read every single answer so this may be a duplicate  Here s my take   inner   width  50   background-color  Khaki  margin  0 auto

User · Answer

Give some width to the inner div and add margin 0 auto  in the CSS property

User · Answer

Centering only horizontally In my experience  the best way to center a box horizontally is to apply the following properties  The container   should have text-align  center   The content box   should have display  inline-block   Demo   x000D   x000D   container     width  100     height  120px    background   CCC    text-align  center      centered-content     display  inline-block    background   FFF    padding  20px    border  1px solid  000    x000D   lt div class  container  gt     lt div class  centered-content  gt      Center this     lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle   Centering both horizontally  amp  vertically In my experience  the best way to center a box both vertically and horizontally is to use an additional container and apply the following properties  The outer container   should have display  table   The inner container   should have display  table-cell  should have vertical-align  middle  should have text-align  center   The content box   should have display  inline-block   Demo   x000D   x000D   outer-container     display  table    width  100     height  120px    background   CCC      inner-container     display  table-cell    vertical-align  middle    text-align  center      centered-content     display  inline-block    background   FFF    padding  20px    border  1px solid  000    x000D   lt div class  outer-container  gt     lt div class  inner-container  gt       lt div class  centered-content  gt        Center this       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle

User · Answer

Use    x000D   x000D   outerDiv   x000D    width  500px  x000D    x000D   x000D   innerDiv   x000D    width  200px  x000D    margin  0 auto  x000D    x000D   lt div id  outerDiv  gt  x000D     lt div id  innerDiv  gt Inner Content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just add this CSS content into your CSS file  It will automatically center the content   Align horizontally to center in CSS    outer       display  flex      justify-content  center      Align-vertically   horizontal to center in CSS    outer       display  flex      justify-content  center      align-items  center

User · Answer

This worked for me   inner       position  absolute      margin  0 auto      left  0      width  7       right  0     In this code  you determine the width of the element

User · Answer

It is so simple  Just decide what width you want to give to the inner div and use the following CSS  CSS  inner    width  500px     Assumed width      margin  0 auto

User · Answer

Centering  Auto-width Margins  This box is horizontally centered by setting its right and left margin widths to  auto   This is the preferred way to accomplish horizontal centering with CSS and works very well in most browsers with CSS nbsp 2 support  Unfortunately  Internet nbsp Explorer nbsp 5 Windows does not respond to this method - a shortcoming of that browser  not the technique   There is a simple workaround   A pause while you fight back the nausea induced by that word   Ready  Internet nbsp Explorer nbsp 5 Windows incorrectly applies the CSS  text-align  attribute to block-level elements  Declaring  text-align center  for the containing block-level element  often the BODY element  horizontally centers the box in Internet nbsp Explorer nbsp 5 Windows   There is a side effect of this workaround  the CSS  text-align  attribute is inherited  centering inline content  It is often necessary to explicitly set the  text-align  attribute for the centered box  counteracting the effects of the Internet nbsp Explorer nbsp 5 Windows workaround  The relevant CSS follows   body       margin  50px 0px      padding  0px      text-align  center      Content       width  500px      margin  0px auto      text-align  left      padding  15px      border  1px dashed  333      background-color   EEE      http   bluerobot com web css center1 html

User · Answer

The best way is using table-cell display  inner  that come exactly after a div with the display table  outer  and set vertical align for the inner div  with table-cell display  and every tag you use in the inner div placed in the center of div or page   Note  you must set a specified height to outer  It is the best way you know without position relative or absolute  and you can use it in every browser as same    x000D   x000D   outer  x000D    display  table  x000D    height  100vh  x000D    width  100   x000D    x000D   x000D   x000D   inner  x000D    display  table-cell  x000D    vertical-align  middle  x000D    text-align  center  x000D    x000D   lt div id  outer  gt  x000D       lt div id  inner  gt  x000D         lt h1 gt  x000D            set content center x000D         lt  h1 gt  x000D         lt div gt  x000D          hi this is the best way to align your items center x000D         lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

With Grid A pretty simpel and modern way is to use display  grid  x000D   x000D  div       border  1px dotted grey      outer       display  grid      place-items  center      height  50px     not necessary      x000D   lt  DOCTYPE html gt   lt html gt       lt head gt       lt  head gt        lt body gt           lt div id  outer  gt               lt div gt Foo foo lt  div gt           lt  div gt       lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

You can use one line of code  just text-align center   Here s an example    x000D   x000D   inner   x000D    text-align  center  x000D      x000D   lt div id  outer  style  width 100   gt  x000D     lt div id  inner  gt  lt button gt hello lt  button gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS   inner     display  table    margin  0 auto       HTML   lt div id  outer  style  width 100   gt       lt div id  inner  gt Foo foo lt  div gt   lt  div gt

User · Answer

Use this code    lt div id  outer  gt       lt div id  inner  gt Foo foo lt  div gt   lt  div gt    inner     width  50     margin  0 auto    text-align  center

User · Answer

Yes  this is short and clean code for horizontal align    classname      display  box     margin  0 auto     width  500px    Width set as per your requirement

User · Answer

The best I have used in my various projects is    lt div class  outer  gt       lt div class  inner  gt  lt  div gt   lt  div gt   outer    width  500px    height  500px    position  relative    background  yellow     inner    width  100px    height  100px    background red    position  absolute    left  50     top  50     transform  translate -50   -50        fiddle link

User · Answer

x000D   x000D   outer x000D    x000D    background-color  rgb 230 230 255   x000D    width  100   x000D    height  50px  x000D    x000D   inner x000D    x000D    background-color  rgb 200 200 255   x000D    width  50   x000D    height  50px  x000D    margin  0 auto  x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D      margin 0 auto x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use the below code   HTML   lt div id  outer  gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt    CSS   outer     text-align  center     inner    display  inline-block

User · Answer

I ve created this example to show how to vertically and horizontally align   The code is basically this    outer     position  relative      and      inner     margin  auto    position  absolute    left 0    right  0    top  0    bottom  0      And it will stay in the center even when you resize your screen

User · Answer

A nice thing I recently found  mixing the use of line-height vertical-align and the 50  left trick  you can center a dynamically sized box inside another dynamically sized box  on both the horizontal and vertical using pure CSS  Note you must use spans  and inline-block   tested in modern browsers   Internet  Explorer  8  HTML   lt h1 gt Center dynamic box using only css test lt  h1 gt   lt div class  quot container quot  gt     lt div class  quot center quot  gt       lt div class  quot center-container quot  gt         lt span class  quot dyn-box quot  gt           lt div class  quot dyn-head quot  gt This is a head lt  div gt           lt div class  quot dyn-body quot  gt            This is a body lt br   gt            Content lt br   gt            Content lt br   gt            Content lt br   gt            Content lt br   gt           lt  div gt         lt  span gt       lt  div gt     lt  div gt   lt  div gt   CSS   container     position  absolute    left  0    right  0    top  0    bottom  0    overflow  hidden      center     position  absolute    left  50     top  50       center-container     position  absolute    left  -2500px    top  -2500px    width  5000px    height  5000px    line-height  5000px    text-align  center    overflow  hidden      dyn-box     display  inline-block    vertical-align  middle    line-height  100        Purely asthetic below this point      background   808080    padding  13px    border-radius  11px    font-family  arial      dyn-head     background  red    color  white    min-width  300px    padding  20px    font-size  23px      dyn-body     padding  10px    background  white    color  red     See example here

User · Answer

Depending on your circumstances  the simplest solution could be   margin  0 auto  float  none

User · Answer

The best approaches are with CSS 3   Box model    x000D   x000D   outer   x000D    width  100   x000D       Firefox    x000D    display  -moz-box  x000D    -moz-box-pack  center  x000D    -moz-box-align  center  x000D       Safari and Chrome    x000D    display  -webkit-box  x000D    -webkit-box-pack  center  x000D    -webkit-box-align  center  x000D       W3C    x000D    display  box  x000D    box-pack  center  x000D    box-align  center  x000D    x000D   x000D   inner   x000D    width  50   x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    According to your usability you may also use the box-orient  box-flex  box-direction properties   Flex    outer       display  flex      flex-direction  row      flex-wrap  wrap      justify-content  center      align-items  center      Read more about centering the child elements   Link 2 Link 3 Link 4   And this explains why the box model is the best approach    Why is the W3C box model considered better

User · Answer

You can just simply use Flexbox like this    x000D   x000D   outer   x000D      display  flex  x000D      justify-content  center x000D    x000D   lt div id  outer  gt  x000D       lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Apply Autoprefixer for all browser support    outer       display  -webkit-box      display  -ms-flexbox      display  flex      width  100       -webkit-box-pack  center      -ms-flex-pack  center      justify-content  center     Or else  Use transform    x000D   x000D   inner   x000D      position  absolute  x000D      left  50   x000D      transform  translate -50   x000D    x000D   lt div id  outer  gt  x000D       lt div id  inner  gt Foo foo lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    With Autoprefixer    inner       position  absolute      left  50       -webkit-transform  translate -50        -ms-transform      translate -50        transform          translate -50

User · Answer

It s possible using CSS 3 Flexbox  You have two methods when using Flexbox   Set the parent display flex  and add properties  justify-content center   align-items center   to your parent element    x000D   x000D   outer     display  flex    justify-content  center    align-items  center    x000D   lt div id  outer  style  width 100   gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D    Set the parent display flex and add margin auto  to the child    x000D   x000D   outer     display  flex      inner     margin  auto    x000D   lt div id  outer  style  width 100   gt     lt div id  inner  gt Foo foo lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Try out this    outer      display  inline-block      height  100       vertical-align  middle      outer  gt   inner      display  inline-block      font-size  19px      margin  20px      max-width  320px      min-height  20px      min-width  30px      padding  14px      vertical-align  middle

User · Answer

Centering a div of unknown height and width Horizontally and vertically  It works with reasonably modern browsers  Firefox  Safari WebKit  Chrome  Internet  amp  Explorer  amp  10  Opera  etc    x000D   x000D   content     position  absolute    left  50     top  50     transform  translate -50   -50      x000D   lt div class  content  gt This works with any content lt  div gt  x000D   x000D   x000D   Tinker with it further on Codepen or on JSBin

User · Answer

In my case I needed to center on screen  a dropdown menu using flexbox for it s items  below a button that could have various locations vertically  None of the suggestions worked until I changed position from absolute to fixed  like this    margin  auto    left  0    right  0    position  fixed   The above codes makes the dropdown to always center on the screen for devices of all sizes  no matter where the dropdown button is located vertically

User · Answer

I used Flexbox or CSS grid   Flexbox   x000D   x000D   outer  x000D      display  flex  x000D      justify-content  center  x000D    x000D   x000D   x000D   CSS grid   x000D   x000D   outer   x000D      display  inline-grid  x000D      grid-template-rows  100px 100px 100px  x000D      grid-template-columns  100px 100px 100px  x000D      grid-gap  3px  x000D    x000D   x000D   x000D     You can solve the issue in many ways

User · Answer

Try this    lt div id  a  gt       lt div id  b  gt  lt  div gt   lt  div gt    CSS    a     border  1px solid red     height  120px     width  400px     b     border  1px solid blue     height  90px     width  300px     position  relative     margin-left  auto     margin-right  auto

[html] How to horizontally center an element

Examples related to html

Examples related to css

Examples related to alignment

Examples related to centering