CSS Responsive way to center a fluid div without px width while limiting the maximum width

Question

I ve seen a million questions about how to center a block element and there seem to be a couple popular ways to do it  but they all rely on fixed pixels widths  Then either margin 0 auto or with absolute relative positioning and left 50   margin-left  -1 2 width   etc  We all know this can t work if the element has a width set in     Is there really no way to do this in a way that is truly fluid  I m talking about using   for width  not setting a dozen media queries with increasingly small fixed widths     Beware  there are tons of solutions out there which use the buzz word  responsive  but don t answer my question  because they use fixed widths anyway   Here s an example   Update  I almost forgot  how do you handle limiting the max-width of the centered element and still keep it in the center  See my comment under  smdrager s answer  Real-life example  I want a pop-up message or a light box effect containing a paragraph of text to appear centered in the window and the text to wrap fluidly depending on the width  But I don t want the text box to stretch out toooo far where the text would get difficult to read  imagine a 4ft screen with three paragraphs stretched out onto a single line of text   If you add a max-width to most approaches  the centered box will stop centering when the max-width is reached

User · Answer

Something like this could be it   HTML    lt div class  random  gt          SOMETHING   lt  div gt    CSS  body       text-align  center      random       width  60       margin  auto      background-color  yellow      display block       DEMO  http   jsfiddle net t5Pp2 2   Edit  adding display block doesn t ruin the thing  so     You can also set the margin to  margin  0 auto 0 auto  just to be sure it centers only this way not from the top too

User · Answer

EDIT   http   codepen io gcyrillus pen daCyu So for a popup  you have to use position fixed   display table property and max-width with em or rem values    with this CSS basis     popup     position fixed    width 100     height 100     display table    pointer-events none     popup  gt  div     display table-cell    vertical-align middle     popup p     width 80     max-width 20em    margin auto    pointer-events auto

User · Answer

I think you can use display  inline-block on the element you want to center and set text-align  center  on its parent  This definitely center the div on all screen sizes   Here you can see a fiddle  http   jsfiddle net PwC4T 2  I add the code here for completeness   HTML   lt div id  container  gt       lt div id  main  gt           lt div id  somebackground  gt              Hi          lt  div gt       lt  div gt   lt  div gt    CSS   container       text-align  center     main       display  inline-block     somebackground       text-align  left      background-color  red      For vertical centering  I  dropped  support for some older browsers in favour of display  table   which absolutely reduce code  see this fiddle  http   jsfiddle net jFAjY 1   Here is the code  again  for completeness   HTML   lt body gt       lt div id  table-container  gt           lt div id  container  gt               lt div id  main  gt                   lt div id  somebackground  gt                      Hi                  lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt    CSS  body  html       height  100      table-container       display     table      text-align  center      width       100       height      100      container       display         table-cell      vertical-align  middle     main       display  inline-block     somebackground       text-align        left      background-color  red      The advantage of this approach  You don t have to deal with any percantage  it also handles correctly the  lt video gt  tag  html5   which has two different sizes  one during load  one after load  you can t fetch the tag size  till video is loaded    The downside is that it drops support for some older browser  I think IE8 won t handle this correctly

User · Answer

This might sound really simplistic     But this will center the div inside the div  exactly in the center in relation to left and right margin or parent container  but you can adjust percentage symmetrically on left and right   margin-right  10   margin-left  10     Then you can adjust   to make it as wide as you want it

User · Answer

From Chris Coyier s article on centering percentage width elements      Instead of using negative margins  you use negative translate     transforms     center     position  absolute    left  50     top  50           Nope      margin-left  -25     margin-top  -25                 Yep         transform  translate -50   -50            Not even necessary really     e g  Height could be left out         width  40     height  50       Codepen

User · Answer

Centering both horizontally and vertically  Actually  having the height and width in percents makes centering it even easier  You just offset the left and top by half of the area not occupied by the div   So if you height is 40   100  - 40    60   So you want 30  above and below  Then top  30  does the trick   See the example here  http   dabblet com gist 5957545  Centering only horizontally  Use inline-block  The other answer here will not work for IE 8 and below  however  You must use a CSS hack or conditional styles for that  Here is the hack version   See the example here  http   dabblet com gist 5957591   inlineblock        display  inline-block      zoom  1      display   inline     ie hack        EDIT  By using media queries you can combine two techniques to achive the effect you want  The only complication is height  You use a nested div to switch between   width and   http   dabblet com gist 5957676   media  max-width  1000px         center        center-inner left 25  top 25  position absolute width 50  height 300px background  f0f text-align center max-width 500px max-height 500px      media  min-width  1000px         center left 50  top 25  position absolute        center-inner width 500px height 100  margin-left -250px height 300px background  f0f text-align center max-width 500px max-height 500px

[html] CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

HTML

CSS

Examples related to html

Examples related to css

Examples related to responsive-design