CSS 頁面配置方法【垂直置中】

一、使用垂直置中屬性存在的問題

在CSS中垂直置中定義屬性vertical-align，但是只能用作內嵌元素。

二、使用邊界屬性定義垂直置中存在的問題

使用margin:auto 0;無法使快元素中的內容垂直置中。（無效）

三、容器和內容大小固定的垂直置中

1.父元素的補白屬性定義垂直置中

.div1{

margin:50px 0 0;

width:500px;
height:150px;
background:#666666;
border:4px solid #000000;
}

.div2{
width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">這裡是需要置中的內容</div>
</div>

2.子項目的邊界屬性定義垂直置中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
margin:50px 0 0;
width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">這裡是需要置中的內容</div>
</div>

3.使用子項目的定位屬性定義垂直置中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
position:relative;

top:50px;

width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">這裡是需要置中的內容</div>
</div>

四、內容大小固定的垂直置中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
position:relative;

top:50%;

margin-top:-50px;

width:200px;
height:100px;
background:#999999;

border:1px solid #000000;

}

<div class-"div1">
<div class="div2">這裡是需要置中的內容</div>
</div>

五、容器大小固定的垂直置中

.div{
float:left;
width:250px;
height:200px;
background:#666666;
border:4px solid #000000;
}
.div1{
line-height:200px;
font-size:179pxl
}
.img{
height:100px;
vertical-align:middle;
}
<div class-"div1">
<img src="images/pic.gif" alt="pic" />
</div>
<div></div>

六、內容大小和容器大小均不固定的垂直置中

.father{
position:relative;
width:500px;
height:200px;
border:4px solid #000000;
}

.in{
position:absolute;
top:50%;
}

.son{
position:relative;
top:-50%;
width:200px;
height:100px;
background:#999999;
border:2px solid #000000;
}

<div class="father">　　
　　<div class="in">
　　　　<div class="son">這裡的內容顯示部分</div>
　　</div></div>