Question

我不知道为什么带有id＆＃39; text＆＃39;自动获得100％的高度和宽度。我希望它像div一样居中，标识为＆＃39; logo＆＃39;并在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;
}

这是小提琴 - 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
}

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

不能将div放在另一个div的中心

2 个答案: