『READY前端』 rwd響應式網頁中使用絕對定位position把div垂直置中的方法－Ray

把時間浪費在有質感的事物上

Dec 29 Fri 2017 14:31
『READY前端』 rwd響應式網頁中使用絕對定位position把div垂直置中的方法

父元素:

.banner {
    background-image: url(../images/header_desktop.png);
    background-color:black;
    background-repeat: no-repeat;
    background-position: center center;
    height: 420px;
    /* 父元素加入 */
    position: relative;
}

子元素:

.banner_box {
    width: 400px;
    height:150px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align:center;
    color:#fff;
    /* 子元素加入 */
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}