How to center text vertically

Question

Can someone help me center the button texts? I’ve tried everything I found on the Internet and nothing works.

Answer 1

You can use display: flex:

.button{
   width: 157px;
   height: 95px;
   background: yellow;
   text-align: center;
   float: left;
   top: 50%;
   position: relative;

   /* flex para alinhar conteúdo*/
   display: flex;
   justify-content: center;
   align-items: center;
}

<div>
   <a class="button">Texto do link teste 2 teste 2</a>
</div>

Answer 2

You can do it that way too:

div {
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
  display: table;
  background-color: #aaa;
}

div > a {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div>
  <a href="#">Botão</a>
</div>

<div>
  <a href="#">Botão</a>
</div>

<div>
  <a href="#">Botão</a>
</div>

Answer 3

EDIT: Option with transform: translate the advantage of it is that vc will not depend on fixed values, because it will always align in the center of the box, regardless of its height and width.

.box {
    width: 200px;
    height: 100px;
    background-color: tomato;
    position: relative;
}
.box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="box">
    <span>Texto Item</span>
</div>

---

There are several options to center elements (horizontally and vertically). Without your code it is difficult to suggest the best option...

My suggestion, to be different from the others already answered, is to put the line-height with the same value as height box set

See the example below working:

.box {
    width: 200px;
    height: 100px;
    background-color: aquamarine;
    line-height: 100px;
    text-align: center;    
}

<div class="box">
    <span>Texto Item</span>
</div>

Answer 4

You can try to accomplish this way.

.flexbox-container {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   align-items: center;
}

<div class="flexbox-container">
      <a href="#">Teste do botão</a>
</div>