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

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

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    lt div class  parentElement  gt       lt div class  childElement  gt           Some Contents         lt  div gt     lt  div gt      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    lt  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

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

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

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

[html] Center a DIV horizontally and vertically

Examples related to html

Examples related to css

Examples related to center