如何父DIV垂直

我想中心下面wrapper父div元素內與等於一個height到windowsview height，使用CSS內居中的元件。如何父DIV垂直

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 */ }

請幫我傢伙，謝謝。

來源

2017-09-20 bellabelle

問題與使用顯示器撓性 – bellabelle

@bellabelle嗨的解決，試試這個方法：https://jsfiddle.net/dh0o82g6/與定位&&與Flexbox的：HTTPS：/ /jsfiddle.net/dh0o82g6/1/ –

而不是在你的定位中使用px，嘗試使用'％'在不同的屏幕上完美地工作。 – bhansa

你想要這樣的東西嗎？

的變化：

html和主體元件應設置爲窗口（視口）的高度，所以就用該屬性height:100vh，然後身體默認已邊距爲8px，所以我使用了財產margin:0px。
要把div放在你的中心，只需要使用text-align: center作爲main-header的div。

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>

來源

2017-09-20 07:30:34

不，我想垂直居中包裝元素 – bellabelle

@bellabelle你現在可以檢查我的答案嗎？ –

隨着Flexbox的：

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

.wrapper{ 
    /* your wrapper style */ 
}

隨着絕對位置：

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

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

來源

2017-09-20 07:30:35

結果不是 – bellabelle

對不起，你的答案是正確的，顯示flex然後對齊項目中心 – bellabelle

它的工作原理！謝謝 – bellabelle

選中此項：增加了top:46%和left:46%，你也可以用其他方式來做。

.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>

來源

2017-09-20 07:33:27 bhansa

你只需要添加top: 0; bottom: 0您.wrapper這樣的：

.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>

您還可以檢查此Fiddle

來源

2017-09-20 07:35:54 kravisingh

只需將display: table給予父母，並將display: table-cell; vertival-align: middle;給予適合您的孩子。

工作示例。

<!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>

來源

2017-09-20 07:37:27 Nitheesh

如何父DIV垂直

回答

相關問題