Een DIV horizontaal en verticaal centreren

Is er een manier om EEN DIV verticaal en horizontaal TE CENTERENmaar, en dat is belangrijk, dat de inhoud niet wordt geknipt wanneer het venster kleiner is dan de inhoudDe div moet een achtergrondkleur en een breedte en hoogte hebben.

Ik heb div’s altijd gecentreerd met de absolute positionering en negatieve marges zoals in het gegeven voorbeeld. Maar het heeft het probleem dat het de inhoud bovenaan snijdt. Is er een methode om de div .content te centreren zonder dit probleem?

Ik heb hier het voorbeeld om te spelen: 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:

<div class="background">
    <div class="content"> some text </div>
</div>

Mijn vraag is geen duplicaat van “Hoe kan ik een element horizontaal en verticaal centreren?” 1- Mijn vraag is eerder gesteld. (check de data). 2- Mijn vraag stel heel duidelijk en in het zwart als voorwaarde: “de inhoud wordt niet gesneden als het venster kleiner is dan de inhoud”

Antwoord 1, autoriteit 100%

Voor moderne browsers

Als je die luxe hebt. Er is ook flexbox, maar dat wordt op het moment van schrijven niet breed ondersteund.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Speel er verder mee op Codepenof op JSBin

Kijk elders in deze thread voor ondersteuning van oudere browsers.

Antwoord 2, autoriteit 88%

Na veel dingen geprobeerd te hebben, vind ik een manier die werkt. Ik deel het hier als het nuttig is voor iemand. Je kunt het hier zien werken: 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;
}

Antwoord 3, autoriteit 27%

Hier is een demo:
http://www.w3.org/Style/Examples/007/center-example

Een methode(JSFiddle-voorbeeld)

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML:

<div id="content">
    Content goes here
</div>

Nog een methode
(jsfiddle voorbeeld )

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>

Antwoord 4, Autoriteit 3%

De legitieme manier om dat te doen, ongeacht de omvang van de div voor elke browsergrootte is:

  div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

live-code

Antwoord 5

U kunt verschillende methoden vergelijken met deze pagina: http: / /blog.themeforest.net/tutorials/vertical-center-with-css/

De methode die ze aanbevelen is het toevoegen van een leeg zwevend element voor de inhoud die je niet kunt centreren, en het wissen ervan. Het heeft niet het nadeel dat je noemde.

Ik heb je JSBin gevorkt om het toe te passen: http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>
<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}
#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}

Antwoord 6

Ik geloof niet dat er een manier is om dit strikt met CSS te doen. De reden is uw “belangrijk”kwalificatie voor de vraag: het bovenliggende element dwingen om uit te breiden met de inhoud van zijn kind.

Mijn gok is dat je wat JavaScript moet gebruiken om de lengte van het kind te vinden en aanpassingen te maken.

Dus, met deze HTML:

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

Deze CSS:

.parentElement {
 positie:relatief;
 breedte:960px;
}
.childElement {
 positie:absoluut;
 boven:50%;
 links: 50%;
}

Deze jQuery kan nuttig zijn:

$('.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'});
});

Vergeet niet om de jQ correct te laden, ofwel in de body onder de betreffende elementen, of in de head in $(document).ready(...).

Antwoord 7

U wilt stijl instellen

margin: auto;

En verwijder de positioneringsstijlen (boven, links, positie)

Ik weet dat dit horizontaal wordt gecentreerd, maar ik ben niet zeker van verticaal!