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

Hier ist ein Skript, das ich vor einer Weile geschrieben habe ( es wurde mit der jQuery-Bibliothek geschrieben ):

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};

Answer 2

Dies ist der beste Code, um den div bot horizontal und vertikal zu zentrieren

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

Answer 3

2018 Weg mit CSS Grid:

.parent{
    display: grid;
    place-items: center center;
}

Prüfen Sie die Browserunterstützung, Caniuse schlägt vor, dass es von Chrome 57, FF 52, Opera 44, Safari 10.1, Edge 16 aus funktioniert. Ich habe es nicht selbst überprüft.

Siehe Ausschnitt unten:

.parent{
    display: grid;
    place-items: center center;
    /*place-items is a shorthand for align-items and justify-items*/

    height: 200px;
    border: 1px solid black;
    background: gainsboro;
}

.child{
    background: white;
}

<div class="parent">
    <div class="child">Centered!</div>
</div>

Answer 4

Ich bin zwar zu spät dran, aber es ist sehr leicht und einfach. Seite Mitte ist immer links 50%, und oben 50%. Also minus die div Breite und Höhe 50% und setzen Sie den linken Rand und rechten Rand. Hoffe, es funktioniert für alle -

body{
  background: #EEE;
}
.center-div{
  position: absolute;
  width: 200px;
  height: 60px;
  left: 50%;  
  margin-left: -100px;
  top: 50%;
  margin-top: -30px;
  background: #CCC;
  color: #000;
  text-align: center;
}

<div class="center-div">
  <h3>This is center div</h3>
</div>

Answer 5

Ich weiß, ich bin spät zu der Partei, aber hier ist ein Weg, um ein div mit unbekannten Dimension innerhalb eines Elternteils von unbekannten Dimension zentrieren.

Stil:

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

DEMO:

Sehen Sie sich das an Demo .