[CSS]簡單的DIV垂直居中－程式設計@筆記

公告版位

礁溪溫泉套房,位於宜蘭縣礁溪國小旁,近麥當勞,離礁溪火車站、首都客運、葛瑪蘭汽車客運約5分鍾車程,礁溪溫泉套房出租,您不需要再行添購傢俱，只需要帶幾件衣服，就能輕輕鬆鬆住進礁溪溫泉套房,天天在礁溪溫泉套房洗溫泉唷！意洽:游媽媽,電話0939711360，4500~4900元/月

Dec 21 Wed 2016 10:57
[CSS]簡單的DIV垂直居中

例1
<style>
#parent
{
display:table;
border:solid 1px black;
height:80px;
}
#child{
display:table-cell;
vertical-align:middle;
}
</style>
<div id="parent">
<div id="child">垂直居中</div>
</div>

例2，DIV垂直居中
<style>
.parent{
width:200px;
height:150px;
border:1px solid #000;
}
.child{
position: relative;
top:50%;
margin:0 auto;
transform:translateY(-50%);
background:#095;
}
</style>