html - 无法将 div 置于另一个 div 的中心

Question

我不知道为什么 ID 为“text”的 div 会自动获得 100% 的高度和宽度。我希望它像带有 id 'logo' 的 div 一样居中，并在 77px 的顶部和底部给它一个填充。

请帮忙。

HTML

<div id="wrapper-1">
<div class="divider"></div>
<div id="logo">
    Logo
</div>
</div>
<div id="wrapper-2">
<div class="divider"></div>
<div id="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>

CSS

body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #131316;
}

.divider{
width: 1px;
height: 100%;
background-color: #f9f9f9;
margin: auto;
z-index: 1;
}

#wrapper-1{
width: 100%;
height: 100%;
position: relative;
}

#logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 177px;
height: 177px;
background-color: #f9f9f9;
color: #131316;
z-index: 2;
}

#wrapper-2{
width: 100%;
height: 100%;
position: relative;
}

#text{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
background-color: blue;
}

这是 fiddle - link

Answer 1

Demo

CSS

#text{                        //its a div so display block by default, thus width 100% by default.
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
    background-color: blue;
    width:177px;
    height:177px;            //you need to give width and height here, as to explicitly absolute positioned it with top, left, right, bottom 0
}