Bagaimana cara menyelaraskan secara vertikal ke tengah konten div dengan lebar / tinggi yang ditentukan?

Apa metode yang benar untuk memusatkan konten secara vertikal dalam lebar / tinggi yang ditentukan div.

Dalam contoh ada dua konten dengan ketinggian berbeda, cara terbaik untuk memusatkan secara vertikal menggunakan kelas .content. (dan berfungsi untuk setiap browser dan tanpa solusi dari table-cell)

Miliki beberapa solusi dalam pikiran, tetapi ingin tahu ide lain, salah satunya menggunakan position:absolute; top:0; bottom: 0;dan margin auto.

Saya telah meneliti ini sedikit dan dari apa yang saya temukan, Anda memiliki empat opsi:

Versi 1: Div induk dengan tampilan sebagai sel tabel

Jika Anda tidak keberatan menggunakan display:table-celldi div induk, Anda dapat menggunakan opsi berikut:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

DEMO langsung

Versi 2: Div induk dengan blok tampilan dan sel tabel tampilan konten

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

DEMO langsung

Versi 3: Div induk mengambang dan div konten sebagai sel tabel tampilan

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

DEMO langsung

Versi 4: Posisi div induk relatif dengan posisi konten absolut

Satu-satunya masalah yang saya miliki dengan versi ini adalah sepertinya Anda harus membuat css untuk setiap implementasi tertentu. Alasan untuk ini adalah div konten harus memiliki tinggi yang ditetapkan yang akan diisi teks Anda dan margin-top akan ditentukan darinya. Masalah ini bisa dilihat di demo. Anda bisa membuatnya berfungsi untuk setiap skenario secara manual dengan mengubah% tinggi div konten Anda dan mengalikannya dengan -.5 untuk mendapatkan nilai margin atas Anda.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

DEMO langsung

Ini juga dapat dilakukan display: flexdengan hanya menggunakan beberapa baris kode. Berikut ini contohnya:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Demo Langsung

Saya menemukan solusi ini di artikel ini

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Ini bekerja seperti pesona jika ketinggian elemen tidak tetap.

Trik sederhana untuk memusatkan konten div secara vertikal adalah dengan mengatur tinggi garis sama dengan tinggi:

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

tetapi ini hanya berfungsi untuk satu baris teks!

Pendekatan terbaik adalah dengan div sebagai container dan span dengan nilai di dalamnya:

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

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

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

margin: all_four_margin

dengan memberikan 50% ke all_four_margin akan menempatkan elemen di tengah

style="margin: 50%"

Anda juga dapat menerapkannya untuk mengikuti

margin: kanan atas kiri bawah

margin: kanan atas & kiri bawah

margin: kanan atas & bawah & kiri

dengan memberikan% yang sesuai kita mendapatkan elemen dimanapun kita inginkan.