Ich versuche einfach, meinen bg-Text innerhalb des äußeren div zu zentrieren, deshalb habe ich ein Bild im Hintergrund mit dem h1-Tag in der Mitte für alle Geräte. Ich hatte ursprünglich das, wo der Rand oben ein festes Pixel war. Ich brauche es als Prozentsatz, damit es im Zentrum bleibt. Wenn ich jedoch den oberen Rand durch einen Prozentwert ersetzt habe, würde das h1-Element als minimiere meinen Bildschirm nach oben gleiten. Ich möchte, dass es Rand oben bleibt: 50% meines Hintergrundbildes zu jeder Zeit.Wie man ein Div innerhalb eines Divs vertikal mit einem Hintergrundbild zentriert
HTML
<div class= 'bg'>
<div class='bg-text'>
<h1>Text</h1>
</div>
</div>
CSS
.
.bg {
display: table;
width: 100%;
height: 50%;
background-image: image-url('pic.jpg');
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.bg-text{
color: #fff;
text-align: center;
text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
margin-top: 150px;
}
.bg-text h1{
font-size: 50px;
font-weight: 700;
}
Mögliche Duplikat [Vertically ein div in einem div Zentrum] (http://stackoverflow.com/questions/9307566/vertically-center-align-a-div-within-anothe-div?s = 6 | 2.3735) und eine Menge anderer durch Suche nach SO gefunden. – Rob
Mögliches Duplikat von [Horizontales Zentrieren eines Div in einem Div] (http: // stackoverflow.com/questions/114543/horizontal-Zentrum-ein-Div-in-einem-Div) –