将圆放置在div的中心

Question

我有以下代码，其中我创建了三个圆圈来显示表单的步骤。我正在尝试将圆包围在div的内部。我尝试使用圆圈文本类margin: 0 auto;的边距将它们放置在中心，但是圆圈没有到达div的中心。

.circle-text {
  display: table-cell;
  height: 200px;
  /*change this and the width
for the size of your initial circle*/
  width: 200px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  /*make it pretty*/
  background: #000;
  color: #fff;
  font: 18px "josefin sans", arial;
  /*change this
for font-size and font-family*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />

<div class="row">
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 1
    </div>
  </div>
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 2
    </div>
  </div>
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 3
    </div>
  </div>
</div>

如何将圆圈放在其div的中间？

Answer 1

table-cell不能使用margin: auto居中，因为它仅适用于已知宽度的<div>。我添加了line-height个与高度匹配的东西。

.circle-text {
  display: block;
  margin: auto;
  height: 200px;
  /*change this and the width
for the size of your initial circle*/
  width: 200px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  /*make it pretty*/
  background: #000;
  color: #fff;
  font: 18px "josefin sans", arial;
  /*change this
for font-size and font-family*/
  line-height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />

<div class="row">
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 1
    </div>
  </div>
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 2
    </div>
  </div>
  <div class="col s4 m4 l4">
    <div class="circle-text">
      Step 3
    </div>
  </div>
</div>

预览