Hur man centrerar element vertikalt

Hur man centrerar vertikalt för vilket element som helst

Exempel

<style>
.container {
  höjd: 200px;
  position: relativ;
  border: 3px solid green;
}
.vertical-center {
  marginal: 0;
  position: absolut;
  överst: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
<div class="container">
  <div class="vertical-center">
    <p>Jag är centrerad vertikalt.</p>
  </div>
</div>

Prova själv

Hur man centrerar vertikalt och horisontellt

Exempel

<style>
.container {
  höjd: 200px;
  position: relativ;
  border: 3px solid green;
}
.center {
  marginal: 0;
  position: absolut;
  överst: 50%;
  vänster: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
<div class="container">
  <div class="center">
    <p>Jag är centrerad både vertikalt och horisontellt.</p>
  </div>
</div>

Prova själv

Du kan också använda Flexbox för att centrera element:

Exempel

.center {
  visa: flex;
  justera-innehåll: center;
  justera-innehåll: center;
  höjd: 200px;
  border: 3px solid green;
}

Prova själv

Relaterade sidor

教程：CSS Justering

教程：CSS Transformering

教程：CSS Flexbox