Wie kann ich Zentrum ein div-Element, egal was die Auflösung

Question

ich ein div-Element habe ich mit prozentualen Margen am Zentrieren:

dh.left: 30%;

Das Problem ist, dass dies bei größeren Auflösungen falsch ausgerichtet und hässlich wird.

Wie kann ich die Fensterberechnungsmethode nur mit CSS verwenden, um mein div-Element während aller Auflösungen immer genau zentriert zu halten?

Bitte beachten: ELEMENT IST POSITIONIERT BEFESTIGT!

Answer 1

Dadurch wird Ihr Element immer zentriert bei jeder Bildschirmauflösung.

.centered { 
 
     position: fixed; 
 
     left: 50%; 
 
     top:50%; 
 
     transform: translateX(-50%, -50%); 
 
    }

<div class="centered">center</div>

Answer 2

Würde die Verwendung von Ansichtsfensterbreite und -höhe helfen?

Beispiel auf der linken Seite 30% der Fensterbreite:

left:30vw; 

Lassen Sie mich wissen, ob es funktioniert!

Answer 3

Dies stellt sicher, dass Ihr Element wird horizontal zentriert werden, unabhängig von ihrer übergeordneten Dimensionen, Position oder Breite:

.el { 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div class="el">Always horizontally centered</div>

Answer 4

Da Ihr Element position:fixed ist es dann zu bringen wahr Zentrum mit einer horizontalen Transformation.

Mit einer X-Transformation können Sie sie unabhängig von der Breite zurück in die Mitte bringen. Dies ist vorteilhaft, weil Sie ohne die Transformation die Breite des Elements explizit beanspruchen müssten, und dann einen negativen Rand der Hälfte seiner Breite geben.

Viel zu viel Arbeit, wenn Sie mich fragen. Außerdem können feste Breiten Sie in Schwierigkeiten bringen.

Diese 2D-Transformationsmethode wird von allen gängigen Browsern unterstützt except for Opera Mini and IE8.

<div>Element</div> 

---

div { 
    left: 50%; 
    transform: translateX(-50%); 
    position: fixed; 
    display: block; 
    background: red; 
    color: white; 
    padding: 10px; 
    box-sizing: border-box; 
    margin: 10px auto; 
    text-align: center; 
} 

https://jsfiddle.net/27b94jh3/7/

Answer 5

Für neuen Browser ist Flexbox immer eine Option:

.container { 
 
    position:fixed; 
 
    width:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.spacer { 
 
    height:2000px; 
 
}

<div class="container"> 
 
    Always Centered 
 
</div> 
 
<div class="spacer"></div>

I hinzugefügt a div für den Abstand, um die Schriftrolle zu demonstrieren.