CSS網頁佈局垂直居中整理

1、使用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>

 

2、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>

更多：

CSS3 Flex佈局整理(三)-項目屬性

CSS3 Flex佈局整理(二)-容器屬性

CSS3 Flex佈局整理(一)