垂直居中另一個div內的div

我正在嘗試vertical-align: middle另一個div內的div，但由於某種原因，它無法正常工作。我究竟做錯了什麼？垂直居中另一個div內的div

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'block'> I'm Block </div> 
 
<div>

PS：這僅僅是一個例子，所以沒有，我真的不知道的div的實際寬度和高度，因爲它們是動態的，根據其內容，所以請不要使用margin-top：125px或padding-top：125px的答案，或者類似的答案。

來源

2016-02-14 jessica

的vertical-align屬性僅適用於行內和表小區元件（source）。在你的代碼中，你正在使用塊級元素。

試試這個Flexbox的選擇：

#wrapper { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex;    /* establish flex container */ 
 
    align-items: center;   /* vertically center flex items */ 
 
} 
 

 
#block { 
 
    border: 1px solid blue; 
 
    width: 500px; 
 
    height: 250px; 
 
    /* vertical-align: middle; */ 
 
}

<div id='wrapper'> 
 
    <div id='block'> I'm Block </div> 
 
<div>

瞭解更多關於Flex對準這裏：Methods for Aligning Flex Items

瀏覽器支持：Flexbox將被所有主流瀏覽器的支持， except IE < 10。一些最近的瀏覽器版本，如Safari 8和IE10，需要vendor prefixes。要快速添加前綴，請使用Autoprefixer。更多詳情，請點擊this answer。

來源

2016-02-14 04:59:38

偉大的解決方案，謝謝。 – Juanra

是的，這是工作謝謝你。 – Udara

這是我通常如何做到這一點。

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
position: relative; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
position: absolute; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
}

<div id="wrapper"> 
 
<div id="block"></div> 
 
</div>

簡單的方法，使之動態。

來源

2016-02-14 04:56:10 magreenberg

你可以這樣做：

#block { 
border: 1px solid blue; 
margin:25% 0; 
width: 500px; 
height: 250px; 
vertical-align: middle;}

但是，這不是你要找的！

或這樣的：

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
display:table-cell; 
vertical-align: middle; 
} 
#block { 
border: 1px solid blue; 
display:inline-block; 
width: 500px; 
height: 250px; 
}

來源

2016-02-14 04:59:22

你可以這樣來做：

#wrapper { 
    border: 1px solid red; 
    width: 500px; 
    height: 500px; 
} 
#block { 
    border: 1px solid blue; 
    width: 500px; 
    height: 250px; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

這裏實時查看：https://jsfiddle.net/w9bpy1t4/

來源

2016-02-14 05:00:11 melalonso

如果你知道內div的高度，然後ü可以在包裝和位置的絕對使用相對位置內部div有一些餘量。所以CSS可以是這個

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
position: relative; 
} 
#block { 
border: 1px solid blue; 
width: 500px; 
height: 250px; 
vertical-align: middle; 
position: absolute; 
margin-top: 50%; 
top: -125px; 
}

來源

2016-02-14 05:07:27

垂直居中另一個div內的div

回答

相關問題