CSS網頁布局垂直居中整理

一、使用CSS3處理垂直居中方式

1.使用Flex布局處理（推薦），簡單好用

body,html{
    width:100%;
    height:100%;
}
.out {
    width: 20%;
    height: 50%;
    border: 1px solid  blue;
    display: flex;
    justify-content: center; /*水準居中*/
    align-items:center;/*垂直方向居中*/
}

.inner {
    width: 50%;
    height: 50%;
    background:red;
}      

<!--Div塊元素高度居中 方式4-->
<!--
    1.flex布局支援水準方向和垂直方向的居中
    2.外框寬度高度可以自适應，内框寬度高度也可以自适應
    3.需要浏覽器支援Css3
-->
<div class="out">
    <div class="inner"></div>
</div>      

2.使用定位top+translateY()

body,html{
    width:100%;
    height:100%;
}
.out {
    width: 20%;
    height: 40%;
    border: 1px solid  rgba(0, 255, 0, 0.8);
}

.inner {
    width: 50%;
    height: 50%;
    margin: 0px auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 0, 0, 0.8);
}      

<!--Div塊元素高度居中 方式1-->
<!--
    1.外框高度可以自适應,内部框高度可以自适應
    2.使用translateY(50%) ,top:50% 居中處理
    3.說明translate的百分比相對于自己，top的百分比是相對于外部框
    4.此方法對于IE9以下浏覽器不支援，也就是需要浏覽器對CSS3的支援
-->
<div class="out">
    <div class="inner"></div>
</div>      

二、Css2中垂直居中方式

1.使用定位top+margin-top(-number)

body,html{
    width:100%;
    height:100%;
}
.out {
    width: 20%;
    height: 50%;
    border: 1px solid  blue;
}
.inner {
    width: 50%;
    height: 100px;
    margin: 0px auto;
    position: relative;
    top:50%;
    margin-top: -50px;
    background:red;
}      

<!--Div塊元素高度居中 方式2-->
<!--
    1.外框高度可以自适應,内部框高度固定
    2.使用top:50%，margin-top:-50px(目前div高度的一半) 居中處理
    3.浏覽器基本都相容
-->
<div class="out">
    <div class="inner"></div>
</div>      

更多：