Как централизовать иконку внутри маленького граничащего элемента?

Question

Есть ли способ централизовать текст внутри ограниченного элемента? Когда я делаю границу в элементе, может быть потому, что размер его содержимого уменьшается, он становится децентрализованным.

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
}

.button-styling {
  color: #00b0ff;
  font-size: x-large;
}

.outline-h {
  outline: thin;
  outline-color: blue;
  outline-style: solid;
}

<div style="max-width: 15px;">
  <h3> With border </h1>
    <div class="circle">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>
<div style="max-width: 15px;">
  <h3> Without border </h1>
    <div class="outline-h">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>

Answer 1

Вы можете использовать flexbox для центрирования текстового элемента:

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
  /*Add*/
  display: flex;
  justify-content: center;
  align-items: center;
}

<div style="max-width: 15px;">
  <h3>With border</h3>
  <div class="circle">
    <mat-icon class="button-styling">+</mat-icon>
  </div>
</div>

Answer 2

Мне удалось отцентрировать его, используя display: flex.

. Проверьте поддержку браузера: https://caniuse.com/#feat = flexbox

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-styling {
  color: #00b0ff;
  font-size: x-large;
}

.outline-h {
  outline: thin;
  outline-color: blue;
  outline-style: solid;
}

<div style="max-width: 15px;">
  <h3> With border </h1>
    <div class="circle">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>
<div style="max-width: 15px;">
  <h3> Without border </h1>
    <div class="outline-h">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>

Answer 3

Вы можете попробовать это:

.circle {
    text-align: center;
    line-height: 20px;
}