如何在动态大小的div中心放置一个按钮

Question

我有这个代码:

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

和css:

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

输出是:这个

现在我想把按钮放在'外部'div的中心,无论宽度是多少.

例如:我希望按钮位于中心,即使:这个.每次div大小改变时都不必更改css.即使'外部'div是动态的,按钮也应该在中心.

谢谢.

Answer 1

这以简单,简洁的方式实现了您的目标:

.button {
    display:block;
    margin: 0 auto;
}

http://fiddle.jshell.net/mDHBX/2/