父级元素以及子元素高度宽度未知如何实现水平垂直居中？

发布于
2015-11-30

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

这个方案在父级元素们没有设置position为relative的时候，相对于html是水平垂直居中的，但是如果父级元素指定position为relative，并且高度不定的时候，无法实现垂直居中。

我想实现这样的效果：
父级元素占浏览器宽50%，高100%，在浏览器左边，子元素在父元素中水平垂直居中。
图片描述

请问这样可以实现吗？

css

阅读 11.2k

5 个回答

起风了

✓ 已被采纳

先上图
图片描述

HTML

<body>
    <div id="parent">
        <div class="wrapper"><!-- 若使用position居中对齐，需要嵌套一层 -->
            <div id="child">
                子元素子元素子元素子元素子元素
           </div>
       </div>
    </div>
    <div id="main">
        正常文档流
    </div>  
</body>

CSS（请无视*选择符）

*{
    padding: 0;
    margin: 0;
}
#main{
    padding-left: 50%;
}
body{
    background: #faa;
    height: 1000px;
}
#parent{
    width: 50%;
    height: 100%;
    position: fixed;
    background: #cee;
    color: #fff;
}
#parent .wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}
#child{
    width: 320px;
    height: 320px;
    background: #543;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -160px 0 0 -160px;/* 考虑兼容性，使用margin */
}

https://jsfiddle.net/w7c4pda2/

念一爸爸

231512

发布于
2017-09-06

更新于
2017-09-06

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        .parent{  
            background-color: wheat; position:relative  
        }  
        .child{  
            transform: translateY(-50%); border:solid 1px red; display:inline-block; position: absolute; top:50%  
        }  
    </style>  
</head>  
<body>  
    <div class="parent" style="height:700px;">  
        <div  class="child" style="height:200px;width:300px; left:5%">  
        </div>  
        <div class="child" style="height:300px;width:300px; left:60%;">  
        </div>  
    </div>  
</body>  
</html>

你试试就知道了
transform: translateY(-50%)是核心