Wie in einem übergeordneten div ein Element zum Zentrum vertikal

I unter wrapper innerhalb des übergeordneten div-Element mit einem height gleich windowsview height zentrieren möchten, CSS verwenden.Wie in einem übergeordneten div ein Element zum Zentrum vertikal

HTML

<div class="main-header"> 
    <div class="wrapper">center div</div> 
</div>

CSS

.main-header{ 
color: #fff; 
background: #16a8ec; 
padding: 10px; 
height: 100vh; 
position: relative; } 

.wrapper{ 
position: absolute; 
left: 0px; 
right: 0px; 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

Bitte helfen Sie mir Jungs, danke.

Quelle

2017-09-20 bellabelle

Das Problem bei der Verwendung von Display-flex gelöst wurde – bellabelle

@bellabelle Hallo, versucht, auf diese Weise: https://jsfiddle.net/dh0o82g6/ mit Positionierung && mit Flexbox: https://jsfiddle.net/dh0o82g6/1/ –

Anstatt px in deiner Positionierung zu verwenden, kannst du versuchen, '%' zu verwenden. – bhansa

Haben Sie so etwas wie dies wünschen?

die Änderungen:

HTML und Körperelement sollen auf Höhe des Fensters (Darstellungsfeld) gesetzt werden, so habe ich die Eigenschaft height:100vh, dann Körper standardmäßig ist der Marge auf 8px gesetzt, Also habe ich die Eigenschaft margin:0px benutzt.
Um das div innerhalb zu zentrieren, brauchen Sie nur text-align: center für das div mit Klasse main-header.

html, 
 
body { 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
.main-header { 
 
    color: #fff; 
 
    background: #16a8ec; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    height: 100vh; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
}

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Quelle

2017-09-20 07:30:34

Nein, ich möchte das Wrapper-Element vertikal zentrieren – bellabelle

@bellabelle Können Sie meine Antwort jetzt überprüfen? –

Mit FlexBox:

.main-header{ 
    color: #fff; 
    background: #16a8ec; 
    padding: 10px; 
    height: 100vh; 
    position: relative; 
    /* Flexbox */ 
    display: flex; 
    align-items: center; 
} 

.wrapper{ 
    /* your wrapper style */ 
}

Mit absoluter Position:

.main-header{ 
    color: #fff; 
    background: #16a8ec; 
    padding: 10px; 
    height: 100vh; 
    position: relative; 
} 

.wrapper{ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

Diese

Quelle

2017-09-20 07:30:35

das Ergebnis nicht – bellabelle

Leider können Sie direkt mit Ihrer Antwort, zeigen flex dann ausrichten-Produkte Zentrum – bellabelle

es funktioniert! Vielen Dank – bellabelle

Check: Hinzugefügt top:46% und left:46%, können Sie auch tun es anders herum.

.main-header{ 
 
color: #fff; 
 
background: #16a8ec; 
 
padding: 10px; 
 
height: 100vh; 
 
position: relative; } 
 

 
.wrapper{ 
 
position: absolute; 
 
top:46%; 
 
left: 46%; 
 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Quelle

2017-09-20 07:33:27 bhansa

Sie müssen nur top: 0; bottom: 0 wie diese zu Ihrem .wrapper hinzufügen:

.main-header{ 
 
color: #fff; 
 
background: #16a8ec; 
 
padding: 10px; 
 
height: 100vh; 
 
position: relative; } 
 

 
.wrapper{ 
 
position: absolute; 
 
left: 0px; 
 
right: 0px; 
 
transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
 
text-align: center; 
 
top: 0; 
 
bottom: 0; 
 
}

<div class="main-header"> 
 
    <div class="wrapper">center div</div> 
 
</div>

Sie auch diese Fiddle

überprüfen geben

Quelle

2017-09-20 07:35:54 kravisingh

Nur display: table zu Eltern und display: table-cell; vertival-align: middle; zu Kind, das für Sie arbeiten.

Arbeitsbeispiel.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     .main-header { 
 
      color: #fff; 
 
      background: #16a8ec; 
 
      padding: 10px; 
 
      height: 100vh; 
 
      width: 100%; 
 
      display: table; 
 
     } 
 
     
 
     .wrapper { 
 
      display: table-cell; 
 
      vertical-align: middle; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="main-header"> 
 
     <div class="wrapper">center div</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-09-20 07:37:27 Nitheesh

Wie in einem übergeordneten div ein Element zum Zentrum vertikal

Antwort

Verwandte Themen