<h2>line-height</h2>
<div class="div1">
  居中居s
</div>


<h2>tabel-cell</h2>
<div class="div3">
  <span>居中居中居中居中居中居中居中居中</span>
</div>

<h2>flex</h2>
<div class="div4">
  <span>居中居中居中居中居中居中居中居中</span>
</div>

<h2>transform</h2>
<div class="div5">
    <span>居中居中居中居中居中居中居中居中</span>
</div>
div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}

.div1 {
  line-height: 100px;
}

.div3 {
  display: table;
  span {
    display: table-cell;
    vertical-align: middle;
  }
}

.div4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div5 {
  position: relative;
  span {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.