Question

我的网页在div的左侧有一个垂直粘性菜单。以横向页面为中心的内容位于另一个div中。菜单div和内容div都在第三个div中，以页面为中心。

有时内容div的内容多于页面上的内容，但有时候却没有。在内容未填满页面的情况下，我希望内容在页面上垂直居中（示例here）。但是，当内容越过页面时，我希望内容像往常一样被证明是最合适的（例如here）。

默认情况下，当内容超过页面时，工作正常。如果内容没有填满页面，我如何将内容垂直居中？

这是我的CSS：

body {
    font-family: "Arial", Helvetica, sans-serif;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
}

a {
    color: #6FBD31;
    text-decoration: none;
}

div.sticky-menu ul {
    list-style-type: none;
    text-align: right;
}

div.sticky-menu li {
    background-position: 100%;
    padding-right: .6em;
    font-size: 20px;
    margin: 0 0 15px 0;
}

div.sticky-menu {
    position: fixed;
    display: block;
    top: 30%;
}

div.sticky-menu a:link {
    color: #D8D8D8;
}

div.sticky-menu a:visited {
    color: #D8D8D8;
}

div.sticky-menu a:hover {
    color: #000000;
}

div.sticky-menu a:active {
    color: #D8D8D8;
}

div.wrapp {
    width: 55%;
    margin: 0 auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

div.content {
    width: 80%;
    margin: 2em auto;
}

我的主页HTML：

<html>
    <head>
        <title>Allie Saupp&eacute;</title>
        <link rel="stylesheet" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="content">
            <div class="sticky-menu">
                <ul id="menu-items">
                    <li class="item" id="home">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch">Home</a>
                    </li>
                    <li class="item" id="research">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/research">Research</a>
                    </li>
                    <li class="item" id="publications">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/publications">Publications</a>
                    </li>
                    <li class="item" id="teaching">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/teaching">Teaching</a>
                    </li>
                </ul>
            </div>

            <div class="wrapp">
                <p>
                I am a Ph.D. candidate at the <a href="http://www.wisc.edu">University of Wisconsin-Madison</a> where I am part of the <a
                href="http://www.hci.cs.wisc.edu">Human-Computer Interaction Lab</a> in the <a href="http://www.cs.wisc.edu">Computer Sciences department</a>. I work
                with my advisor, <a href="http://www.cs.wisc.edu/~bilge">Bilge Mutlu</a>, to design more effective collaborative behaviors to enable robots to work
                alongside humans.
                </p>
            </div>
        </div>
    </body>
<html>

我希望段落垂直居中（例如，顶部和底部的空间大致相等）。

Answer 1

在这里，我编辑了div，以便它可以显示你想要的方式。

div.content {
height: 500px;
width: 80%;
margin: 2em auto;
}

div.wrapp {
width: 55%;
margin: 2em auto;
height: 250px;
position: relative;
top: 65%;
transform: translateY(-50%);
}
div.multiplewrapps {
width: 55%;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

悲伤地没有为野生动物园制作。因此，如果您想在页面上使用多个段落，只需将类更改为＆＃34; multiplewrapps＆＃34;它将应用该css代码！ =）很高兴我能帮忙！

页面未满时动态居中网页内容

1 个答案: