Saya memiliki divset ke display:block( 90px heightdan width), dan saya memiliki beberapa teks di dalamnya.

Saya perlu teks untuk disejajarkan di tengah baik secara vertikal dan horizontal.

Saya sudah mencoba text-align:center, tetapi itu tidak melakukan bagian horizontal, jadi saya mencoba vertical-align:middle, tetapi tidak berhasil.

Ada ide?

Jika itu adalah satu baris teks dan / atau gambar, maka itu mudah dilakukan. Cukup gunakan:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Itu dia. Jika bisa beberapa baris, maka itu agak lebih rumit. Tetapi ada solusi di http://pmob.co.uk/ . Cari "perataan vertikal".

Karena mereka cenderung menjadi peretasan atau menambahkan div yang rumit ... Saya biasanya menggunakan tabel dengan sel tunggal untuk melakukannya ... untuk membuatnya sesederhana mungkin.

Pembaruan untuk 2020:

Kecuali Anda perlu membuatnya bekerja di browser sebelumnya seperti Internet Explorer 10, Anda dapat menggunakan flexbox. Ini didukung secara luas oleh semua browser utama saat ini . Pada dasarnya, wadah perlu ditentukan sebagai wadah fleksibel, bersama dengan pemusatan sepanjang sumbu utama dan silangnya:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Untuk menentukan lebar tetap untuk anak, yang disebut "item fleksibel":

#content {
  flex: 0 0 120px;
}

Contoh: http://jsfiddle.net/2woqsef1/1/

Untuk menyusutkan konten, itu bahkan lebih sederhana: hapus saja flex: ... baris dari item fleksibel, dan itu secara otomatis menyusut.

Contoh: http://jsfiddle.net/2woqsef1/2/

Contoh di atas telah diuji pada peramban utama termasuk MS Edge dan Internet Explorer 11.

Satu catatan teknis jika Anda perlu menyesuaikannya: di dalam item fleksibel, karena item fleksibel ini bukan wadah fleksibel itu sendiri, cara lama CSS non-flexbox berfungsi seperti yang diharapkan. Namun, jika Anda menambahkan item flex tambahan ke wadah flex saat ini, kedua item flex tersebut akan ditempatkan secara horizontal. Untuk membuatnya ditempatkan secara vertikal, tambahkan flex-direction: column;wadah fleksibel. Ini adalah cara kerjanya antara wadah fleksibel dan wadahnya elemen anak langsungnya .

Ada metode alternatif untuk melakukan pemusatan: dengan tidak menentukan centerdistribusi pada sumbu utama dan silang untuk wadah fleksibel, tetapi sebaliknya menentukan margin: autoitem fleksibel untuk mengambil semua ruang ekstra di keempat arah, dan margin yang didistribusikan secara merata akan membuat item fleksibel terpusat ke segala arah. Ini berfungsi kecuali jika ada beberapa item fleksibel. Juga, teknik ini berfungsi pada MS Edge tetapi tidak pada Internet Explorer 11.

Pembaruan untuk 2016/2017:

Ini dapat dilakukan dengan lebih umum transform, dan bekerja dengan baik bahkan di browser lama seperti Internet Explorer 10 dan Internet Explorer 11. Ini dapat mendukung banyak baris teks:

position: relative;
top: 50%;
transform: translateY(-50%);

Contoh: https://jsfiddle.net/wb8u02kL/1/

Untuk mengecilkan lebar:

Solusi di atas menggunakan lebar tetap untuk area konten. Untuk menggunakan lebar yang dibungkus menyusut, gunakan

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Contoh: https://jsfiddle.net/wb8u02kL/2/

Jika dukungan untuk Internet Explorer 10 diperlukan, maka flexbox tidak akan berfungsi dan metode di atas dan line-heightmetode itu akan berfungsi. Kalau tidak, flexbox akan melakukan pekerjaan itu.

Teknik umum pada 2014:

• Pendekatan 1 - transform translateX/ translateY:

  Contoh Di Sini / Contoh Layar Penuh

  Di browser yang didukung (sebagian besar dari mereka), Anda dapat menggunakan top: 50%/ left: 50%dalam kombinasi dengan translateX(-50%) translateY(-50%)untuk memusatkan elemen secara vertikal / horizontal secara dinamis.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

• Pendekatan 2 - Metode Flexbox:

  Contoh Di Sini / Contoh Layar Penuh

  Di browser yang didukung , setel displayelemen yang ditargetkan ke flexdan gunakan align-items: centeruntuk pemusatan vertikal dan justify-content: centeruntuk pemusatan horizontal. Hanya saja, jangan lupa menambahkan awalan vendor untuk dukungan browser tambahan ( lihat contoh ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

• Pendekatan 3 - table-cell/ vertical-align: middle:

  Contoh Di Sini / Contoh Layar Penuh

  Dalam beberapa kasus, Anda perlu memastikan bahwa ketinggian html/ bodyelemen diatur ke 100%.

  Untuk penyelarasan vertikal, mengatur orangtua elemen width/ heightuntuk 100%dan menambahkan display: table. Kemudian untuk elemen anak, ubah displayto table-celldan addvertical-align: middle .

  Untuk pemusatan horizontal, Anda bisa menambahkan text-align: centerke tengah teks dan inlineelemen anak - anak lainnya . Atau, Anda bisa menggunakan margin: 0 autoasumsi elemen blocklevel.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

• Pendekatan 4 - Diposisikan sepenuhnya 50%dari atas dengan perpindahan:

  Contoh Di Sini / Contoh Layar Penuh

  Pendekatan ini mengasumsikan bahwa teks memiliki ketinggian yang diketahui - dalam contoh ini 18px,. Posisikan saja elemen 50%dari atas, relatif terhadap elemen induk. Gunakan margin-topnilai negatif yang setengah dari tinggi elemen yang diketahui, dalam hal ini - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

• Pendekatan 5 - line-heightMetode (Paling tidak fleksibel - tidak disarankan):

  Contoh Di Sini

  Dalam beberapa kasus, elemen induk akan memiliki ketinggian tetap. Untuk pemusatan vertikal, yang harus Anda lakukan adalah mengatur aline-height nilai pada elemen anak sama dengan tinggi tetap dari elemen induk.

  Meskipun solusi ini akan berfungsi dalam beberapa kasus, perlu dicatat bahwa itu tidak akan berfungsi ketika ada beberapa baris teks - seperti ini .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

Metode 4 dan 5 bukan yang paling dapat diandalkan. Pergilah dengan salah satu dari 3 yang pertama.

Menggunakan flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

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

Diambil dari Tip Cepat: Cara Paling Sederhana Untuk Memusatkan Elemen Secara Vertikal Dan Horisontal

Tambahkan baris display: table-cell;ke konten CSS Anda untuk div itu.

Hanya sel tabel yang mendukung vertical-align: middle;, tetapi Anda dapat memberikan definisi [table-cell] ke div ...

Contoh langsung ada di sini: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Saya selalu menggunakan CSS berikut untuk sebuah wadah, untuk memusatkan isinya secara horizontal dan vertikal.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Lihat beraksi di sini: https://jsfiddle.net/yp1gusn7/

Anda dapat mencoba kode yang sangat mudah untuk ini:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Tautan kode: http://codepen.io/santoshkhalse/pen/xRmZwr

Berikan kelas CSS ini kepada <div> yang ditargetkan:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Anda dapat menggunakan flexproperti di orang tua div dan menambahkan margin:autoproperti ke item anak-anak:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Anda dapat melihat lebih banyak opsi di flexsini: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pendekatan 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Pendekatan 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Pendekatan 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Ini berfungsi untuk saya (diuji OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Anda dapat memilih nilai lain dari 50%. Misalnya, 25% ke pusat di 25% dari orang tua.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Anda dapat mencoba metode berikut:

1. Jika Anda memiliki satu kata atau satu kalimat kalimat, maka kode berikut dapat melakukan triknya.

   Memiliki teks di dalam tag div dan berikan id. Tetapkan properti berikut untuk id itu.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Catatan: Pastikan properti tinggi garis sama dengan tinggi divisi.

   Gambar

   Tetapi, jika konten lebih dari satu kata atau satu baris maka ini tidak berfungsi. Juga, akan ada saat-saat ketika Anda tidak dapat menentukan ukuran divisi dalam px atau% (ketika divisi sangat kecil dan Anda ingin konten berada tepat di tengah).

2. Untuk mengatasi masalah ini, kita dapat mencoba kombinasi properti berikut.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Gambar

   3 baris kode ini mengatur konten persis di tengah divisi (terlepas dari ukuran layar). The "menyelaraskan-item: center" membantu dalam centering vertikal sementara "membenarkan-konten: center" akan membuatnya horizontal terpusat.

   Catatan: Flex tidak berfungsi di semua browser. Pastikan Anda menambahkan awalan vendor yang sesuai untuk dukungan browser tambahan.

KISI

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Menyesuaikan ketinggian garis untuk mendapatkan perataan vertikal.

line-height: 90px;

Ini harus menjadi jawaban yang tepat. Terbersih dan paling sederhana:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Terapkan gaya:

position: absolute;
top: 50%;
left: 0;
right: 0;

Teks Anda akan terpusat terlepas dari panjangnya.

Ini bekerja untuk saya:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Bagi saya ini adalah solusi terbaik:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Kode sederhana yang bekerja untuk saya! Hanya satu baris dan teks Anda akan dipusatkan secara horizontal.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Outputnya terlihat seperti ini:

Silakan pilih jawaban ini jika itu berfungsi hanya untuk meluangkan waktu devs mencari solusi mudah. Terima kasih! :)

Coba contoh berikut ini. Saya telah menambahkan contoh untuk setiap kategori: horisontal dan vertikal

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>