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

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

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

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

请问这样可以实现吗？

http://www.gaclib.net/Document.html#~/

我觉得你说的这个事情跟我这个网页是一样的。虽然我并不是50%，不过反正只是个数字。

chrome真是糟糕啊，在拖动边框的时候，总是一片黑。相反IE就没这种问题，一边拖动，里面的东西实时排版。

父元素没有

position:relative;

的时候，子元素

position:absolute;

定位的标准是整个屏幕；
父元素有

position:relative;

的时候，子元素

position:absolute;

定位的标准是父元素。
子元素有

position:fixed;

的时候，定位的标准总是浏览器窗口。‘

你要是想子元素总是在html垂直居中，就用fixed；
你要是想子元素在父元素垂直居中，就直接在父元素添加position:relative;子元素代码用你贴出来的代码就好；

css vertical-align:middle (块级元素支持)或者用table <td vertical="middle">

可以用<center> </center>来实现

另外还有个办法
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;

先上图

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/

【热门文章】