如何在父 div 中居中多个 div？答案

【问题标题】：How to center several divs within a parent div?如何在父 div 中居中多个 div？
【发布时间】：2016-05-02 11:24:15
【问题描述】：

我在父 div (class="row services") 中包含 3 个 div。

我怎样才能使三个col s12 l3 div 集中在这个父 div 中？

我尝试过使用display:block 和text-align:center，但这似乎没有效果。

HTML：

<div class="row services">

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Tulsa</p> <p>Tulsa, OK</p></h5>
        <p>9902 S. Memorial Dr.</p>
        <p>Tulsa, OK 74133</p>
        <p>866-612-0040</p>
        <a href="http://www.nelsonmazdaok.com/mazda-dealer-tulsa-ok/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdaok.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Hickory Hollow</p> <p>Antioch, TN</p></h5>
        <p>5300 Mount View Road</p>
        <p>Antioch, TN 37013</p>
        <p>877-708-4449</p>
        <a href="http://www.nelsonmazdahh.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdahh.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Cool Springs</p> <p>Franklin, TN</p></h5>
        <p>7104 S Springs Drive</p>
        <p>Franklin, TN 37067</p>
        <p>877-708-4456</p>
        <a href="http://www.nelsonmazdacs.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdacs.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

</div>

CSS：

【问题讨论】：

您想垂直居中、水平居中还是同时居中？
水平方向@Michael_B

标签： html css flexbox centering

【解决方案1】：

使用 CSS Flexbox 可以轻松居中。

这里有你需要的：

.row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

DEMO

更多 flexbox 居中选项：https://stackoverflow.com/a/33049198/3597276

【讨论】：

我已经在这里寻找答案好几个小时了！其他人总是使用display:block; 或text-align: center;，这是唯一对我有用的东西。

【解决方案2】：

试试这个：

.col s12 l3{
  margin: 0 auto;
}

或者如果你想要它们连续：

.col s12 l3 {
 display: inline-block;
}

我希望这就是你想要的！

【讨论】：