将圆圈放在 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>

预览