Positionieren Sie das absolute div in der Mitte der Bildschirmansicht

Ich möchte div platzieren, das eine absolute Position in der Mitte der Bildschirmansicht hat (gescrollt oder nicht gescrollt).

Ich habe dies, aber seine Orte sind mitten im Dokument und nicht in der Mitte der aktuellen Ansicht.

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-70px;
    margin-top:-50px;   
}

Verwenden Sie das folgende CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Veränderung position:absolute zu position: fixed und Sie sollten gut gehen!

Wenn Sie Position – absolut sagen, ist das Referenz-Div das übergeordnete Div, das eine Position hat – Relativ. Wenn Sie jedoch position -fixed sagen, ist die Referenz das Fenster des Browsers. was Sie in Ihrem Fall wollen.

Im Fall von IE6 müssen Sie vermutlich CSS-Ausdrücke verwenden

Wenn Sie die Position Ihres Elements nicht auf ändern möchten fixedhier ist eine Lösung, bei der Sie Ihr Element behalten absolut.

Da CSS calc() wird jetzt von allen Browsern unterstützt, hier eine Lösung mit calc().

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: calc(50vh - (/* height */100px / 2));
    left: calc(50vw - (/* width */140px / 2)); 
}

Ein etwas komplexerer Weg ist die Verwendung mehrerer Umkartons. Diese Methode funktioniert gut mit oder ohne fest codierte Breite/Höhe des mittleren Kästchens (Hintergrundfarben wurden hinzugefügt, um zu zeigen, was jedes Kästchen tut):

/* content of this box will be centered horizontally */
.boxH
{
  background-color: rgba(0, 127, 255, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* content of this box will be centered vertically */
.boxV
{
  background-color: rgba(255, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* content of this box will be centered horizontally and vertically */
 .boxM
{
  background-color: lightblue;
  padding: 3em;
}

<div>
  some text in the background
</div>
<div class="boxH">
  <div class="boxV">
    <div class="boxM">
      this div is in the middle
    </div>
  </div>
</div>

https://jsfiddle.net/vanowm/7cj1775e/

Wenn Sie div unabhängig von der Bildlaufposition in der Mitte anzeigen möchten, ändern Sie dies position zu fixed

Hier ist eine Lösung mit margin und position: fixed :

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Es zentriert die div durch Erhöhung der margin an allen Seiten, um den gesamten Bildschirm auszufüllen.

EDIT: Ich habe herausgefunden, dass es eine Abkürzung für gibt top,right,bottom,left das ist inset. Es wurde in den wichtigsten Browsern implementiert und Sie können die Kompatibilität mit anderen Browsern sehen hier

Um ein Div absolut auf einem Bildschirm zu zentrieren:

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    inset: 0;
}

Ich habe es geschafft, absolut positionierten Text in der Mitte mit folgendem zu platzieren:

position: absolute;
text-align: center;
left: 1%;
right: 1%;

Dies ist eine Variation der Antwort von Kenneth Bregat. Es unterhält absolute Positionierung statt fixed, und es löst Probleme mit dem Textumbruch, die in einigen Antworten erwähnt werden. Vergessen Sie nicht, dass die Eltern brauchen relative Positionierung.

Was ist mit diesem Trick:

position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;