无法将div定位在另一个div的中心。

Question

我不知道为什么id 'text‘的div自动获得100%的高度和宽度。我希望它的中心像id‘徽标’的div，并给它一个填充在顶部和底部的77 of。

请帮帮忙。

<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;
}

这是小提琴- 链接

Answer 1

演示

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
}

Answer 2

您只需按以下所示更新#text类：

#text {
position: absolute;
width: 177px;
height: 177px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
background-color: rgb(0, 0, 255)
}