Wie zentriert man ein <div> auf einer Seite am besten vertikal und horizontal?

Question

Beste Methode zur Zentrierung einer <div> Element auf einer Seite sowohl vertikal als auch horizontal?

Ich weiß, dass margin-left: auto; margin-right: auto; wird auf der Horizontalen zentriert, aber wie kann man das am besten auch vertikal machen?

Answer 1

Wenn Sie JQuery verwenden, können Sie dies mit Hilfe von .position() ;

<div class="positionthis"></div>

CSS

.positionthis {
    width:100px;
    height:100px;
    position: absolute;
    background:blue;
}

Javascript (JQuery)

$(document).ready(function () {
    $('.positionthis').position({
        of: $(document),
        my: 'center center',
        at: 'center center',
        collision: 'flip flip'
    });
});

JSFiddle : http://jsfiddle.net/vx9gV/

Answer 2

Wenn der Browser dies unterstützt, ist die Verwendung von translate sehr hilfreich.

position: absolute;
background-color: red;

width: 70%;     
height: 30%; 

/* The translate % is relative to the size of the div and not the container*/ 
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);

Answer 3

Bitte verwenden Sie die folgenden CSS-Eigenschaften, um das Element sowohl horizontal als auch vertikal mittig auszurichten. Dies hat bei mir gut funktioniert.

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

Answer 4

Entschuldigung für die späte Antwort Der beste Weg ist

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

margin-top und margin-left sollten der Größe der div-Box entsprechen

Answer 5

Diese Lösung hat bei mir funktioniert

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(oder Höhe: 70% / Boden: 15%)

Höhe : 40% / Boden :30% ...)