html - 将代码块对齐到给定区域的中心

Question

这是我的代码:http://jsfiddle.net/spadez/QJDjh/2/

HTML

<div id="header" class="fullheight center">
    <div id="nav">
        <ul>
            <li>Home</li>
            <li>Price</li>
        </ul>
    </div> <span>Big message</span>
 <span>Smaller message</span>
 <a href="#" id="sign_up">Sign up free</a>
 <span>Sub notes</span>
down arrow</div>
<div id="content">Hello</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}
html, body {
    height:100%;
}
#header {
    background-color: #3B2F63;
    background-image: -webkit-radial-gradient(50% top, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%), -webkit-radial-gradient(right top, #794aa2 0%, rgba(121, 74, 162, 0) 57%);
    background-repeat: no-repeat;
    background-size: 100% 1000px;
    color: #c7c0de;
    margin: 0;
    padding: 0;
}
#header {
}
#content {
    background-color: white;
}
.fullheight {
    height: 100%;
}
.center {
    text-algin: center;
}
span {
    display: block;
}
#sign_up {
    padding: 10px;
    background: white;
    border-radius: 3px;
}

我试图将以下 block 放在 vertically 和 horizo​​ntally 的紫色区域中心:

<span>Big message</span>
<span>Smaller message</span>
<a href="#" id="sign_up">Sign up free</a>
<span>Sub notes</span>

我想在不破坏布局的情况下执行此操作。我是否必须将这个 block 放在一个新的 div 中，并设置相等的边距？

Answer 1

您可以使用 display:table 属性来实现您想要的:

HTML

<div id="header" class="table">
    <div class="row top">
        <div class="cell">
            <ul>
                <li>Home</li>
                <li>Price</li>
            </ul>
        </div>
    </div>
    <div class="row middle">
        <div class="cell">
            <span>Big message</span>
            <span>Smaller message</span>
            <a href="#" id="sign_up">Sign up free</a>
            <span>Sub notes</span>
        </div>
    </div>
    <div class="row bottom">
        <div class="cell">
            down arrow
        </div>
    </div>
</div>

<div id="content">
    Hello           
</div>

CSS

.table { height: 100%; display:table; width:100%; }
.row { display:table-row; }
.cell { display:table-cell; text-align:center; vertical-align:top; }
.middle .cell { vertical-align:middle; height:100%;}

Example