How do you easily horizontally center a div using CSS

Question

I m trying to horizontally center a  lt div gt  block element on a page and have it set to a minimum width  What is the simplest way to do this  I want the  lt div gt  element to be inline with rest of my page  I ll try to draw an example   page text page text page text page text page text page text page text page text                -------                  div                  ------- page text page text page text page text page text page text page text page text

User · Answer

The best response to this question is to use margin-auto but for using it you must know the width of your div in px or     CSS code   div      width 30       margin-left auto      margin-right auto

User · Answer

After nine years I thought it was time to bring a new version  Here are my two  and now one  favourites   Margin  Set margin to auto  You should know the direction sequence is margin   top   right   bottom   left   or margin   top amp bottom   left amp right    x000D   x000D  aside  x000D      display  block  x000D      width  50px  x000D      height  100px  x000D      background-color  green  x000D      float  left  x000D    x000D   x000D  article  x000D      height  100px  x000D      margin  0 0 0 50px     50px aside width    x000D      background-color  grey  x000D    x000D   x000D  div  x000D    margin  0 auto  x000D    display block  x000D    width  60px  x000D    height  60px  x000D    background-color  blue  x000D    color  white  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D       lt  head gt  x000D       lt body gt  x000D           lt aside gt  x000D           lt  aside gt  x000D           lt article gt             x000D                   lt div gt The div lt  div gt  x000D           lt  article gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Center  Depricated  don t use this   Use  lt center gt  lt  center gt  tags as a wrap around your  lt div gt  lt  div gt    Example    x000D   x000D  aside  x000D      display block  x000D      background-color green  x000D      width  50px  x000D      height  100px  x000D      float  left  x000D    x000D   x000D  center  x000D      display block  x000D      background-color grey  x000D      height  100px  x000D      margin-left  50px     Width of the aside    x000D    x000D   x000D  div  x000D      display block   x000D      width  60px   x000D      height  60px   x000D      background-color blue  x000D      color  white  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D       lt  head gt  x000D       lt body gt  x000D           lt aside gt  x000D           lt  aside gt  x000D           lt article gt  x000D               lt center gt  x000D                   lt div gt The div lt  div gt  x000D               lt  center gt  x000D           lt  article gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I use div and span tags together with css properties such as block  cross-browser inline-block and text-align center  see my simple example   lt  DOCTYPE html gt   lt html gt       lt head gt          lt title gt Page Title lt  title gt          lt style gt              block display block               text-center text-align center               border-dashed-black border 1px dashed black               inline-block                   display  -moz-inline-stack                   display  inline-block                   zoom  1                    display  inline                            border-solid-black border 1px solid black               text-left text-align left            lt  style gt       lt  head gt       lt body gt             lt div class  block text-center border-dashed-black  gt                 lt span class  block text-center  gt                     lt span class  block  gt            lt  -- The Div we want to center set any width as long as it is not more than the container-- gt                         lt div class  inline-block text-left border-solid-black  style  width 450px  important   gt                               jjjjjk                        lt  div gt                      lt  span gt                 lt  span gt             lt  div gt         lt  body gt      lt  html gt

User · Answer

x000D   x000D   center   x000D    height  20px  x000D    background-color  blue  x000D    x000D   x000D   center gt div   x000D    margin  auto  x000D    background-color  green  x000D    width  200px  x000D    x000D   lt div class  center  gt  x000D     lt div gt You text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    JsFiddle

User · Answer

Please use the below code and your div will be in the center    class-name       display block      margin 0 auto

User · Answer

You should use position  relative and text-align  center on the parent element and then display  inline-block on the child element you want to center  This is a simple CSS design pattern that will work across all major browsers  Here is an example below or check out the CodePen Example    x000D   x000D  p   x000D    text-align  left  x000D    x000D   container   x000D    position  relative  x000D    display  block  x000D    text-align  center  x000D    x000D     Style your object    x000D   x000D   object   x000D    padding  10px  x000D    color   ffffff  x000D    background-color   556270  x000D    x000D   centerthis   x000D    display  inline-block  x000D    x000D   lt div class  container  gt  x000D   x000D     lt p gt Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus  lt  p gt  x000D   x000D     lt span class  object centerthis  gt Something Centered lt  span gt  x000D   x000D     lt p gt Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS  HTML   x000D   x000D  div mydiv  width  200px  margin  0 auto  x000D   lt div class  mydiv  gt  x000D       x000D      I am in the middle x000D       x000D   lt  div gt  x000D   x000D   x000D    Your diagram shows a block level element also  which a div usually is   not an inline one   Of the top of my head  min-width is supported in FF2  Safari3  IE7   Can be done for IE6 using hackety CSS  or a simple bit of JS

User · Answer

If old browsers are not an issue  use HTML5   CSS3  If they are  apply polyfills and still use HTML5   CSS3  I assume that your div has no margins or paddings here  but they are relatively easy to account for  The code follows    centered       position  relative      left  50       transform  translateX -50        What this does is     Position the div relative to its container  Position the div s left boundary at 50  of its container width horizontally  Translate back horizontally by 50  of the div s own width    It is easy to imagine this process to confirm that the div would be horizontally centered eventually  As a bonus  you can center vertically at no additional cost    centered-vertically       position  relative      top  50       transform  translateY -50        The advantage of this approach is that you don t have to do any counterintuitive stuff  such as considering your div a text of sorts  wrapping it in a  often semantically useless  additional container  or giving it a fixed width  which is not always possible   Don t forget vendor prefixes for transform if needed

User · Answer

you can use margin  0 auto on your css instead of margin-left  auto  margin-right  auto

User · Answer

Using jQuery     document  ready function             myElement   wrap    lt span class  myElement container new  gt  lt  span gt         for IE6         myElement container new   css     for IE6          display     block            position     relative            margin     0            padding     0            border     none            background-color     transparent            clear     both            text-align     center                  myElement   css            display     block            position     relative            max-width     75       for example          margin-left     auto            margin-right     auto            clear     both            text-align     left                or  if you want to center every element with class   myElement      document  ready function             myElement   each function               this  wrap    lt span class  myElement container new  gt  lt  span gt         for IE6             myElement container new   css     for IE6              display     block                position     relative                margin     0                padding     0                border     none                background-color     transparent                clear     both                text-align     center                        this  css                display     block                position     relative                max-width     75                 margin-left     auto                margin-right     auto                clear     both                text-align     left

User · Answer

If your  lt div gt  has position  absolute you need to use width  100     parent       width  100       text-align  center          child           display  inline-block

User · Answer

Add this class to your css file it will work perfectly  steps to do   1  create this first   lt div class  center-role-form  gt     lt  --your div  contrent  place here-- gt   lt  div gt    2  add this to your css   center-role-form       width  fit-content      text-align  center      margin  1em auto      display  table

User · Answer

In the case of a non-fixed width div  i e  you don t know how much space the div will occupy     x000D   x000D   wrapper   x000D    background-color  green     for visualization purposes    x000D    text-align  center  x000D    x000D   yourdiv   x000D    background-color  red     for visualization purposes    x000D    display  inline-block  x000D    x000D   lt div id  wrapper  gt      x000D       lt div id  yourdiv  gt Your text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Keep in mind that the width of  yourdiv is dynamic -  it will grow and shrink to accommodate the text inside it   You can check browser compatibility on Caniuse

User · Answer

If you know the width of your div and it is fixed  you can use the following css   margin-left  calc 50  -  half-of-your-div-width      where  half-of-your-div-width  should be  obviously  the half of the width of your div

User · Answer

you can use the position relative  and then set the left and the top values    cenverDiv      position relative      left 30       top 0px

User · Answer

In most browsers this will work    x000D   x000D  div centre   x000D    width  200px  x000D    display  block  x000D    background-color   eee  x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   lt div class  centre  gt Some Text lt  div gt  x000D   x000D   x000D    In IE6 you will need to add another outer div    x000D   x000D  div layout   x000D    text-align  center  x000D    x000D   x000D  div centre   x000D    text-align  left  x000D    width  200px  x000D    background-color   eee  x000D    display  block  x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   lt div class  layout  gt  x000D     lt div class  centre  gt Some Text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

center      margin-left  auto     margin-right  auto      Minimum width is not globally supported  but can be implemented using   divclass      min-width  200px      Then you can set your div to be    lt div class  center divclass  gt stuff in here lt  div gt

User · Answer

margin  0 auto    as ck has said  min-width is not supported by all browsers

User · Answer

Usage of margin-left auto and margin-right auto may not work in certain situations  Here is a solution what will always work  You specify a required width and than set a left-margin to a half of the remaining width        lt div style  width 80   margin-left calc 10     gt          your html      lt  div gt

User · Answer

Here I add proper answer  You can use this snippet code and customize  Here I use 2 child block This should show center of the page  You can use one or multiple blocks    lt html gt   lt head gt   lt style gt   parent       width  100       border  solid 1px  aaa      text-align  center      font-size  20px      letter-spacing  35px      white-space  nowrap      line-height  12px      overflow  hidden      child       width  100px      height  100px      border  solid 1px  ccc      display  inline-block      vertical-align  middle     lt  style gt   lt  head gt    lt body gt    lt div class  mydiv  id  parent  gt     lt div class  child  gt  Block 1  lt  div gt   lt div class  child  gt  Block 2  lt  div gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

In your html file you write    lt div class  banner  gt    Center content  lt  div gt    your css file you write    banner   display  block  margin  auto  width  100px  height  50px      works for me

User · Answer

The title of the question and the content is actually different  so I will post two solutions for that using Flexbox   I guess Flexbox will replace add to the current standard solution by the time IE8 and IE9 is completely destroyed     Check the current Browser compatibility table for flexbox  Single element   x000D   x000D   container   x000D    display  flex  x000D    justify-content  center  x000D    x000D   lt div class  container  gt  x000D     lt img src  http   placehold it 100x100  gt  x000D   lt  div gt  x000D   x000D   x000D    Multiple elements but center only one  Default behaviour is flex-direction  row which will align all the child items in a single line  Setting it to flex-direction  column will help the lines to be stacked    x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column  x000D    x000D   centered   x000D    align-self  center  x000D    x000D   lt div class  container  gt  x000D     lt p gt 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  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  x000D      lt  p gt  x000D     lt div class  centered  gt  lt img src  http   placehold it 100x100  gt  lt  div gt  x000D     lt p gt 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  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It x000D      has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged   lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[css] How do you easily horizontally center a <div> using CSS?

Examples related to css

Examples related to html