Vertical Align Center


Yatay/Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Sadece Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Sadece Yatay Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

Div İçinde Span Ortala

<div class="container">
  <button class="center">PHP</button>
</div>

.container {
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.center {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}


Yorumlar