如何将多个div放在中心？

Question

如何在视口的顶部中间对齐这些框？不使用flex属性，这些框可以居中吗？

＆＃13;

＆＃13;

div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}

＆＃13;

<div class="box div1">Box</div>
<div class="box div2">Box</div>
<div class="box div3">Box</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当然，你可以添加：

body {
  text-align: center
}

＆＃13;

＆＃13;

body {
  text-align: center
}
div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}

＆＃13;

<div class="box div1">Box</div>
<div class="box div2">Box</div>
<div class="box div3">Box</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用规则text-align: center;

设置容器

<强> HTML

<div class="text-center">
    <div class="box div1">Box</div> 
    <div class="box div2">Box</div>
    <div class="box div3">Box</div>
</div>

<强> CSS

.text-center{
display: block;
text-align: center;
}

Answer 3

而不是身体，你应该将所有3个div包装成一个主div 请在此处查看更新的代码：

 <div class='main'>
   <div class="box div1">Box</div>
   <div class="box div2">Box</div>
   <div class="box div3">Box</div>  
</div>

div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}
.main{
  text-align:center;
}