Question

中心几个div的最佳方法是什么？

我可以设想一些方法，但我正在寻找最简单，最优雅的方式。

以下是指向正在执行该操作的网页的链接：

http://soulmastery.com/#/News

我正在寻找IE9 +安全的东西。

更新1

为了澄清，我还需要垂直居中div行。

不重复，引用的问题仅水平居中。

更新2

这个小提琴（http://jsfiddle.net/k6ShD/4/）几乎可以用最少的CSS来做，但我需要让这些盒子水平居中。

align-items: center;

更新3

由于问题已经结束，我将把答案放在这里。

我知道必须要有一个很好的干净方法来处理CSS3：

http://jsfiddle.net/k6ShD/6/

基本上，

display:flex; 
align-items: center;
justify-content: center;

是否使用弹性箱模型进行操作。

Answer 1

将这样的任意div集中居的最佳方法是将其显示模式设置为内联块并将其父级设置为居中文本：

<div class="wrapper">
    <div id="box-1" class="center-me">...</div>
    <div id="box-2" class="center-me">...</div>
    <div id="box-3" class="center-me">...</div>
</div>

.wrapper {
    text-align: center;
}
.center-me {
    display: inline-block;
}

Answer 2

没有最好的办法，但有很多方法可以做到...... 这个重置了第一列的边距。

    <section id="soul-masters" class="row">
        <div class="col">[col1]</div>
        <div class="col">[col2]</div>
        <div class="col">[col3]</div>
    </section>

    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #soul-masters {
        margin: 0 auto;
        max-width: 990px;
    }
    .row:before, .row:after {
        content: " ";
        display: table;
    }
    .row:after {
        clear: both;
    }
    .col {
        float: left;
        width: 31.3333%;
        background: gray;
        margin-left: 2%;
    }
    .col:first-child {
        margin-left: 0;
    }

http://fiddle.jshell.net/3eNds/20/（添加了normalize.css来设置一些默认值，删除了行容器上不必要的重置边距）

http://fiddle.jshell.net/3eNds/20/show/

垂直居中水平居中行的最佳方法

2 个答案: