Bagaimana cara menyelaraskan elemen vertikal dalam div?


792

Saya memiliki div dengan dua gambar dan sebuah h1. Semuanya perlu disejajarkan secara vertikal di dalam div, di samping satu sama lain.

Salah satu gambar perlu absolutediposisikan dalam div.

Apa yang dibutuhkan CSS untuk bekerja di semua browser umum?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

14
Saya membuat daftar semua cara untuk meluruskan vertikal .. Saya akan meninggalkannya di sini: jsfiddle.net/techsin/FAwku/1
Muhammad Umer

2
Berikut adalah dua metode sederhana untuk memusatkan elemen dalam div, vertikal, horizontal atau keduanya (CSS murni): stackoverflow.com/a/31977476/3597276
Michael Benjamin

1
margin-top: auto dan margin-bottom: auto (Berfungsi untuk banyak kasus).
CrippledTable

Jawaban:


932

Wow, masalah ini sangat populer. Ini didasarkan pada kesalahpahaman di vertical-alignproperti. Artikel yang luar biasa ini menjelaskannya:

Memahami vertical-align, atau "Bagaimana (Tidak) Memusatkan Konten Secara Vertikal" oleh Gavin Kistner.

“Bagaimana cara memusatkan pada CSS” adalah alat web yang bagus yang membantu untuk menemukan atribut pemusatan CSS yang diperlukan untuk situasi yang berbeda.


Singkatnya (dan untuk mencegah pembusukan tautan) :

  • Elemen sebaris (dan hanya elemen sebaris) dapat disejajarkan secara vertikal dalam konteksnya melalui vertical-align: middle. Namun, "konteks" bukan tinggi kontainer induk keseluruhan, itu adalah ketinggian dari baris teks yang mereka gunakan . Contoh jsfiddle
  • Untuk elemen blok, perataan vertikal lebih sulit dan sangat tergantung pada situasi spesifik:
    • Jika elemen dalam dapat memiliki ketinggian tetap , Anda dapat membuat posisinya absolutedan menentukan height, margin-topdan topposisinya. contoh jsfiddle
    • Jika elemen tengah terdiri dari satu baris dan tinggi induknya tetap, Anda dapat dengan mudah mengatur wadah line-heightuntuk mengisi tingginya. Metode ini cukup fleksibel dalam pengalaman saya. contoh jsfiddle
    • ... ada lebih banyak kasus khusus seperti itu.

142
Masalah dengan solusi "valid" (jadi bukan vertical-align: middle) adalah bahwa Anda harus menentukan ketinggian tetap. Sangat tidak mungkin untuk Desain Web Responsif .
Emilie

1
Saya memiliki struktur ini: <div height = "## px"> Teks Saya </ div> Berfungsi untuk saya menyetel baris propertiTinggi menggunakan nilai yang sama seperti yang digunakan dalam properti div height: '## px' (## karena nilai ini dinamis dalam kasus saya) terima kasih
patricK

8
Ini juga bekerja dengan inline-blockdan table-cellelemen. Jika Anda mengalami masalah dengan ini, coba sesuaikan line-heightelemen wadah (yaitu konteks) karena digunakan dalam vertical-alignperhitungan kotak garis.
Alex W

1
css-tricks.com/centering-css-complete-guide <- beberapa opsi bagus yang disajikan di sini, telah menemukan diri saya menggunakan solusi tabel / sel-tabel sebagian besar waktu
shaunhusain

1
Alat ini (howtocenterincsss.com) cukup mengagumkan karena berfungsi langsung di luar kotak di dalam CSS saya yang ada! Itu sangat langka. Ingat masa lalu di mana Anda harus menyalin seluruh stylesheet dari beberapa contoh, kadang-kadang bahkan contoh HTML dan kemudian menghapus dan mengganti nama elemen satu demi satu sampai itu yang saya butuhkan. Bukan kasus untuk situs ini!
konstantin

190

Sekarang dukungan flexbox meningkat, CSS ini diterapkan pada elemen yang mengandung akan memusatkan secara vertikal item yang terkandung:

.container {        
    display: flex;
    align-items: center;
}

Gunakan versi awalan jika Anda juga harus menargetkan Explorer 10, dan browser Android lama (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Solusi yang bagus, terima kasih. Bisakah Anda menyarankan cara membuat flexbox menampilkan bilah gulir horizontal, kalau-kalau elemen dalam lebih besar dari wadah? (Saya mencoba membuat elemen dalam dapat diperbesar / digulir dalam wadah, seperti kanvas di powerpoint)? Apakah mungkin?
Boris Burkov

1
@YazidErman solusi ini tergantung pada flexbox sehingga tidak ada, hanya IE 10 dan di atas support atau browser modern lainnya caniuse.com/#search=flexbox flexbox besar di mana itu didukung tapi itu tidak di mana-mana. Display table dan table cell mungkin merupakan solusi terbaik, kontainer hanya perlu berupa table, elemen yang dipusatkan dibungkus elemen dengan display table cell kemudian dapat ditengahkan seperti yang ditunjukkan oleh beberapa jawaban lain di sini.
shaunhusain

1
Mengapa ini sangat sulit bagi saya untuk menemukan>. <Terima kasih atas jawabannya! Dapat mengkonfirmasi ini berfungsi untuk saya dalam skenario di mana jawaban lain tidak berfungsi.
Michael McKenna

1
Panduan trik CSS yang berguna pada flexbox kemudian lihat align-itemsbagian
icc97

1
Pada tahun 2020 kita dapat menggunakan flexbox caniuse.com/#feat=flexbox
tonygatta

116

Saya menggunakan kode yang sangat sederhana ini:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Jelas, apakah Anda menggunakan a .classatau a #id, hasilnya tidak akan berubah.


3
Berikut adalah contoh lengkap dari semua sembilan kemungkinan perataan (atas-tengah-bawah dan kiri-kanan-tengah): jsfiddle.net/webMac/0swk9hk5
webMac

Pada tahun 2020 kita dapat menggunakan flexbox caniuse.com/#feat=flexbox
tonygatta

berfungsi sempurna untuk saya
huynq0911

49

Ini bekerja untuk saya:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

9
Jadi bukan lagi elemen "blok"?
Pacerier

7
Maka jika Anda ingin menyelaraskan dengan horizontal margin : 0 auto, itu tidak akan berhasil karenadisplay: table-cell
Ortomala Lokni

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

7
Saya pikir solusi ini adalah yang tercepat dan termudah untuk dipahami. Mungkin itu karena aku tidak cukup sabar untuk mendapatkan jawaban yang dipilih. Flexbox semua hal!
modulitos

1
Penambahan justify-content: centersaya tetap kurangnya pemusatan horizontal
Samuel Slade

22

Sebuah teknik dari seorang teman saya:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO di sini


1
teknik ini dijelaskan secara lebih rinci di sini: css-tricks.com/centering-in-the-unknown
nerdess

18

Untuk memposisikan elemen blok ke tengah (berfungsi di IE9 ke atas), perlu pembungkus div:

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

2
Metode ini dapat menyebabkan elemen menjadi buram karena elemen ditempatkan pada "setengah piksel". Solusi untuk ini adalah mengatur perspektif elemen. transform: perspektif (1px) terjemahkanY (-50%);
Simon

16

Semuanya perlu disejajarkan secara vertikal di dalam div

Menyelaraskan bagaimana ? Bagian atas gambar selaras dengan bagian atas teks?

Salah satu gambar harus diposisikan mutlak dalam div.

Benar-benar diposisikan relatif terhadap DIV? Mungkin Anda bisa membuat sketsa apa yang Anda cari ...?

fd telah menjelaskan langkah-langkah untuk penentuan posisi absolut, serta menyesuaikan tampilan H1elemen sedemikian rupa sehingga gambar akan muncul sejalan dengannya. Untuk itu, saya akan menambahkan bahwa Anda dapat menyelaraskan gambar dengan menggunakan vertical-aligngaya:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... ini akan menyatukan header dan gambar, dengan tepi atas rata. Opsi perataan lainnya ada; lihat dokumentasi . Anda juga mungkin merasa bermanfaat untuk menjatuhkan DIV dan memindahkan gambar ke dalam H1elemen - ini memberikan nilai semantik ke wadah, dan menghilangkan kebutuhan untuk menyesuaikan tampilan H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

15

Gunakan formula ini, dan itu akan bekerja selalu tanpa celah:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>


2
Saya belum pernah melihat pemilih jenis ini "#outer [id]" di css. Apa yang harus dilakukan? Bagaimana jika saya akan memiliki kelas bukan id?
Alexa Adrian

12

Hampir semua metode perlu menentukan ketinggian, tetapi seringkali kita tidak memiliki ketinggian.
Jadi di sini adalah trik 3 baris CSS3 yang tidak perlu tahu ketinggiannya.

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

Ini didukung bahkan di IE9.

dengan awalan vendornya:

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

Sumber: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


tetapi ini tampaknya hanya berfungsi ketika ketinggian induk elemen diperbaiki. properti 'atas' dengan nilai persentase hanya berfungsi di wadah dengan ketinggian tetap, benar?
ucdream

Ya itu hanya berfungsi untuk beberapa kasus, saya punya masalah kemudian dengan metode ini ... Masalahnya adalah untuk memiliki kemungkinan sebanyak mungkin dan segera setelah Anda membutuhkan satu Anda menguji semuanya sampai Anda mendapatkan yang baik, karena semua metode mendapat hal-hal yang tidak akan berfungsi dalam kasus tertentu ...
Shadoweb

12

Dengan dua cara, Anda dapat menyelaraskan elemen secara vertikal dan horizontal

  1. Bootstrap 4
  2. CSS3

masukkan deskripsi gambar di sini

1. Bootstrap 4.3.X

untuk penyelarasan vertikal: d-flex align-items-center

untuk penyelarasan horisontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>


1
Kedua cara ini pada dasarnya sama karena Bootstrap menggunakan atribut flex yang sama di kelasnya.
Mx.

Bootstrap bukanlah sihir. Itu tunduk pada keterbatasan CSS yang sama yang mempengaruhi semua orang. Itu hanya menyembunyikan apa yang dilakukannya dari avg. pengguna.
JasonGenX

10

Trik saya adalah meletakkan di dalam div tabel dengan 1 baris dan 1 kolom, atur 100% lebar dan tinggi, dan properti vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/


7
Ini sepertinya cara terbaik untuk menghindari banyak goresan kepala. Saya masih bingung mengapa CSS tidak memiliki standar penyelarasan vertikal.
Kokodoko

5

# 3 cara untuk membuat div anak tengah di div orang tua

  • Metode Penentuan Posisi Absolut
  • Metode Flexbox
  • Metode Transform / Terjemahkan

    masukkan deskripsi gambar di sini

    Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>


4

Menggunakan CSS ke pusat vertikal, Anda bisa membiarkan wadah luar bertindak seperti tabel, dan konten sebagai sel tabel. Dalam format ini objek Anda akan tetap terpusat. :)

Saya bersarang beberapa objek di JSFiddle sebagai contoh, tetapi gagasan intinya adalah seperti ini:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Contoh beberapa objek:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Hasil

Hasil

https://jsfiddle.net/martjemeyer/ybs032uc/1/


3

Secara default, h1 adalah elemen blok dan akan di-render pada baris setelah img pertama, dan akan menyebabkan img kedua muncul di baris setelah blok.

Untuk menghentikan hal ini terjadi, Anda dapat mengatur h1 agar memiliki perilaku aliran sebaris:

#header > h1 { display: inline; }

Sedangkan untuk benar-benar memposisikan img di dalam div , Anda perlu mengatur div yang berisi memiliki "ukuran yang diketahui" sebelum ini akan berfungsi dengan baik. Dalam pengalaman saya, Anda juga perlu mengubah atribut posisi dari default - position: relative berfungsi untuk saya:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Jika Anda bisa membuatnya berfungsi, Anda mungkin ingin mencoba secara progresif menghapus atribut tinggi, lebar, posisi dari div.header untuk mendapatkan atribut minimal yang diperlukan untuk mendapatkan efek yang Anda inginkan.

MEMPERBARUI:

Berikut adalah contoh lengkap yang berfungsi di Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

4
Saya harus mencatat bahwa memiliki DOCTYPE yang tepat terkadang dapat membuat perbedaan besar pada bagaimana CSS akan me-render, terutama di Internet Explorer. Saya sarankan Anda memilih DOCTYPE yang dikenal selaras dengan mode standar ketat sehingga Anda dapat mengharapkan perilaku yang lebih konsisten antara browser.
Mike Tunnicliffe

2
Saya tidak akan 'mengharapkan' konsistensi antara browser .. satu-satunya cara untuk memastikan adalah dengan menguji: /
Cocowalla

3

Kami dapat menggunakan perhitungan fungsi CSS untuk menghitung ukuran elemen dan kemudian memposisikan elemen anak sesuai.

Contoh HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Dan CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo dibuat di sini: https://jsfiddle.net/xnjq1t22/

Solusi ini bekerja dengan baik div heightdan responsifwidth juga.

Catatan: Fungsi calc tidak diuji untuk kompatibilitas dengan browser lama.


3

Per hari ini, saya telah menemukan solusi baru untuk meluruskan beberapa baris teks secara vertikal dalam div menggunakan CSS3 (dan saya juga menggunakan sistem grid bootstrap v3 untuk mempercantik UI), yaitu sebagai berikut:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Sesuai pemahaman saya, orang tua langsung dari elemen yang mengandung teks harus memiliki ketinggian. Saya harap ini akan membantu Anda juga. Terima kasih!


Solusi yang sangat bersih. Yang ini bekerja dengan baik untuk saya.
Akalonda

2

Cara favorit baru saya untuk melakukannya adalah dengan kisi CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>


1

Cukup gunakan tabel satu sel di dalam div! Cukup atur tinggi sel dan tabel dan dengan hingga 100% dan Anda dapat menggunakan penyelarasan vertikal.

Tabel satu sel di dalam div menangani perataan vertikal dan kompatibel mundur ke Zaman Batu!


0

Saya telah menggunakan solusi berikut (tanpa posisi dan tidak ada ketinggian garis) sejak lebih dari setahun, ia bekerja dengan IE 7 dan 8 juga.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

0

Ini adalah solusi pribadi saya untuk elemen i di dalam div

Contoh JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

0

Bagi saya, itu bekerja seperti ini:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Elemen "a" dikonversi menjadi tombol, menggunakan kelas Bootstrap, dan sekarang dipusatkan secara vertikal di dalam "div" luar.


0

menggunakan tampilan flex, pertama-tama Anda harus membungkus wadah item yang ingin Anda selaraskan.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

kemudian terapkan css berikut ke wrapper div atau outdiv dalam contoh saya

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

Kode hanya jawaban yang tidak disarankan. Harap tambahkan beberapa penjelasan tentang bagaimana ini menyelesaikan masalah, atau bagaimana ini berbeda dari jawaban yang ada. Dari Ulasan
Nick

-3

Hanya ini:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Tabel satu sel di dalam div menangani perataan vertikal dan kompatibel mundur ke Zaman Batu!


-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

-4

Berikut ini hanyalah pendekatan (responsif) yang lain:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/


-4

Saya seorang. NET guy yang baru saja masuk ke pemrograman web. Saya tidak menggunakan CSS (well, sedikit). Saya menggunakan sedikit JavaScript untuk menyelesaikan pemusatan vertikal bersama dengan fungsi .css jQuery.

Saya hanya memposting semuanya dari pengujian saya. Ini mungkin tidak terlalu elegan, tetapi sejauh ini berhasil.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

7
Anda sedang mengajar pengembang web baru bagaimana melakukan kesalahan, HTML untuk mendefinisikan konten, CSS untuk styling HTML, dan JavaScript untuk memanipulasi keduanya saat runtime tergantung pada kondisi. Mencampuradukkan mereka dapat dengan cepat menyebabkan spaghetti dan kode intensif kinerja
OverCoder

-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

atau CSS

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

Cakupan Browser


1
Properti perataan-vertikal tidak berlaku karena div ditampilkan: blok secara default dan tampaknya tidak ada yang dilakukan untuk mengubahnya.
Quentin

3
Rupanya tampilan diperbarui table-cell, yang membuatnya vertical-align: middle;bekerja. Bahkan lebih baik, ini bekerja tanpa memerlukan pembungkus bersarang / buffer buffer, dan berfungsi baik untuk teks dan gambar (atau keduanya), dan Anda tidak perlu mengubah properti posisi.
MSpreij

3
Yang ini berhasil. Ini mengubah tampilan ke sel tabel yang mengambil properti menyelaraskan vertikal. Tidak tahu mengapa orang memilih ini.
texasbruce

1
ya, sejauh yang saya tahu ini adalah cara yang paling tidak mengganggu untuk memusatkan sesuatu secara vertikal dalam div. +1
Pma

Ok, mungkin saya terlalu cepat dengan kesimpulan saya ... Menambahkan tampilan: table-cell break margin div dan tambahan perbatasan ditampilkan di luar div, perbatasan dikombinasikan dengan batas-batas tampilan radius di dalam sudut div luar
Pma
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.