Question

我找到了这个解决方案，使我的div垂直和水平居中。但是，如果我填写内容部分超过为div定义的长度，它将在它之外运行。我希望根据div中的内容进行扩展。我如何做到这一点呢？

HTML：

<body>
    <div id="wrapper">
        <div id="headerwrapper">
            <div id="header" class="center">header</div>
        </div>
        <div id="titlewrapper">
            <div id="title" class="center">title</div>
        </div>
        <div id="contentwrapper">
            <div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
        </div>
        <div id="footerwrapper">
            <div id="locationwrapper">
                <div id="location" class="center">location</div>
            </div>
            <div id="copyrightwrapper">
                <div id="copyright" class="center">copyright</div>
            </div>
        </div>
    </div>
</body>

CSS：

html body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: 100%
    max-width: 5em;
}
#wrapper {
    background-color: pink;
    height: 100%;
    width: 100%;
}
#headerwrapper {
    background-color: green;
    width: 100%;
    height: 8em;
}
#header {
    color: white;
    background-color: black;
}
#titlewrapper {
    background-color: red;
    width: 100%;
    height: 8em;
}
#title {
    color: white;
    background-color: black;
}
#contentwrapper {
    background-color: blue;
    width: 100%;
    height: 8em;
}
#content {
    color: white;
    background-color: black;
}
#locationwrapper {
    background-color: yellow;
    width: 100%;
    height: 8em;
}
#location {
    color: white;
    background-color: black;
}
#footerwrapper {
    background-color: brown;
    width: 100%;
    height: 100%;
}
#copyrightwrapper {
    background-color: green;
    width: 100%;
    height: 8em;
}
#copyright {
    color: white;
    background-color: black;
}

Answer 1

如果您希望“内容”部分动态调整高度，请取下固定高度。

变化：

#contentwrapper {
    background-color: blue;
    width: 100%;
    height: 8em;
}

要：

#contentwrapper {
    background-color: blue;
    width: 100%;
}

根据您的要求工作：http://jsfiddle.net/k5YUu/6/

在扩展div的同时使Div居中

1 个答案: