Center a DIV horizontally and vertically

Question

Is there a way to CENTER A DIV vertically and horizontally but  and that is important  that the content will not be cut when the window is smaller than the content  The div must have a background color and a width and hight    I have always centered divs with the absolute positioning and negative margins like in the example provided  But it has the problem that it cuts the content on top  Is there a method to center the div  content without this problem   I have the example here to play  http   jsbin com iquviq 1 edit  CSS   body   margin  0px      background       width  100       height  100       margin  0      padding  0      background-color  yellow         is there a better way than the absolute positioning and negative margin to center the div  content  div with background color a width and a hight           content       width  200px      height  600px      background-color  blue       position absolute      top 50       left 50       margin-left -100px    half width       margin-top -300px    half height       HTML    lt div class  background  gt       lt div class  content  gt  some text  lt  div gt   lt  div gt    My question is not duplicate of  How to center an element horizontally and vertically    1- My question was asked before   just check dates   2- My question ask very clearly and in black as condition   the content will not be cut when the window is smaller than the content

User · Answer

I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.

My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.

So, with this HTML:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>

This CSS:

.parentElement {  
  position:relative;
  width:960px;
}
.childElement {
  position:absolute;
  top:50%;
  left:50%;
}

This jQuery might be useful:

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).

User · Answer

After trying a lot of things I find a way that works  I share it here if it is useful to anyone  You can see it here working  http   jsbin com iquviq 30 edit  content           width  200px          height  600px          background-color  blue          position  absolute    Can also be  fixed            left  0          right  0          top  0          bottom  0          margin  auto            Solves a problem in which the content is being cut when the div is smaller than its  wrapper            max-width  100           max-height  100           overflow  auto

User · Answer

Here s a demo  http   www w3 org Style Examples 007 center-example  A method  JSFiddle example   CSS   html  body       margin  0      padding  0      width  100       height  100       display  table    content       display  table-cell      text-align  center      vertical-align  middle      HTML    lt div id  content  gt      Content goes here  lt  div gt    Another method  JSFiddle example   CSS  body  html   wrapper       width  100       height  100     wrapper       display  table    main       display  table-cell      vertical-align  middle      text-align center     HTML   lt div id  wrapper  gt   lt div id  main  gt      Content goes here  lt  div gt   lt  div gt

User · Answer

The legitimate way to do that irrespective of size of the div for any browser size is       div      margin auto      height  200px      width  200px      position fixed      top 0      bottom 0      left 0      right 0      background red         Live Code

User · Answer

For modern browsers When you have that luxury  There s flexbox too  but that s not broadly supported at the time of this writing  HTML   lt div class  quot content quot  gt This works with any content lt  div gt   CSS   content     position  absolute    left  50     top  50     -webkit-transform  translate -50   -50      transform  translate -50   -50       Tinker with it further on Codepen or on JSBin For older browser support  look elsewhere in this thread

User · Answer

You can compare different methods very well explained on this page  http   blog themeforest net tutorials vertical-centering-with-css   The method they recommend is adding a empty floating element before the content you cant centered  and clearing it  It doesn t have the downside you mentioned   I forked your JSBin to apply it   http   jsbin com iquviq 7 edit  HTML   lt div id  floater  gt   lt  div gt    lt div id  content  gt    Content here  lt  div gt    CSS   floater     float  left     height  50      margin-bottom  -300px      content     clear  both     width  200px    height  600px    position  relative     margin  auto

User · Answer

You want to set style   margin  auto    And remove the positioning styles  top  left  position   I know this will center horrizontaly but I m not sure about vertical

[html] Center a DIV horizontally and vertically

Examples related to html

Examples related to css

Examples related to center