如何使div居中

Question

我用boostrap框架写了一段div样式。但是无论如何都无法居中。代码大致如下：

<div class="row" style="margin-bottom: 5%;" align="center">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-top: 2%;" align="center">Test</div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
            </div>
            

出来的样子是这样的

上面那个Test是居中的。要怎样才能使下面的小div居中排列呢？

Answer 1

你用boostrap 还在里面写行内样式？

<div class="row" style="margin-bottom: 5%;" align="center">
 <div class="container">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-top: 2%;" align="center">Test</div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">

                </div>
            </div>
           </div>  

Answer 2

按照你这种写法 是不能通过margin等等方式去居中
不过你可以再 这些div前后都加一个div而且不设置样式 宽度和高度 和现在四个一样即可

2 + 4*2 + 2 = 12 
// 这样 4*2的div就能在中间了 

Answer 3

人家这样写的是 栅格加起来等于12

Answer 4

这......

Answer 5

别用bootstrap就好了，不是很理解为什么还要写col-xs-12，和col-sm-12这种类。如果实在想居中给这四个盒子。。bootstrap不是还有col-offset-x和col-push-x这种类。
（你都用了row，为什么不用container呢？）

Answer 6

还有algin=“center”不能用于div居中吧 要用margin：0 auto

Answer 7

在class=row的div上架下面的样式试试：

margin-left: 50%;
transform: translateX(-50%);

Answer 8

boostrap 是基于12栅格系统，一行有4个div，就说明一个div要占用3个栅格的宽度

<div class="row">
    <div class="container">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">4</div>
    </div>
</div>

Answer 9

{margin-left:auto;margin-right:auto}最外层的div这样试试呢？

Answer 10

老实说，并不知道你这样做的意义是什么。

简单点，写代码的方式简单点不好嘛？(・-・*)

如果你实在想套用bootstrap后再实现居中，我目前想到的就是在第一个div上设置margin-left达到效果

{margin-left: calc((100% - 16.666667%*4 - 24px*4) / 2 + 12px);}