Saya ingin pusat div
secara vertikal dengan CSS. Saya don't tabel atau JavaScript, tapi hanya CSS murni. Saya menemukan beberapa solusi, tapi semua dari mereka yang hilang Internet Explorer 6 dukungan.
<body>
<div>Div to be aligned vertically</div>
</body>
Bagaimana saya bisa center div
vertikal di semua browser utama, termasuk Internet Explorer 6?
Di bawah ini adalah yang terbaik all-around solusi yang saya bisa untuk membangun secara vertikal dan horizontal center fixed-width, fleksibel tinggi isi kotak. Itu diuji dan bekerja untuk versi terbaru dari Firefox, Opera, Chrome, dan Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Lihat Contoh Kerja Dengan Konten Dinamis
Saya dibangun dalam beberapa konten dinamis untuk menguji fleksibilitas dan ingin tahu jika ada yang melihat masalah dengan itu. Ini harus bekerja dengan baik untuk berpusat overlay juga -- lightbox, pop-up, dll.
Satu lagi yang bisa saya't melihat pada daftar:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
tinggi
harus dinyatakan (lihat Variabel Tinggi)overflow: auto
untuk mencegah konten spillover (lihat Overflow)Sumber: Absolute Centering Horisontal Dan Vertikal Dalam CSS
Cara paling sederhana akan menjadi sebagai berikut 3 CSS:
1) position: relative;
2) atas: 50%;
3) mengubah: translateY(-50%);
Berikut adalah CONTOH:
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>
Sebenarnya anda memerlukan dua div's untuk centering vertikal. Div berisi konten harus memiliki lebar dan tinggi.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Berikut ini adalah [hasil][1]
Sekarang flexbox solusi adalah cara yang sangat mudah untuk browser modern, jadi saya merekomendasikan ini untuk anda:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
Ini adalah metode yang paling sederhana yang saya temukan dan saya menggunakannya sepanjang waktu ([demo jsFiddle here][1])
Terima kasih Chris Coyier dari Trik CSS untuk artikel ini.
<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
Dukungan ini dimulai dengan IE8.
Untuk pusat div pada halaman, [cek biola link][1].
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
Pilihan lain adalah dengan menggunakan flex box, [cek biola link][2].
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
.vh { background-color: #ddd; height: 400px; align-item: center; tampilan: flex; } .vh > div { width: 100%; text-align: center; vertical-align: middle; }
Pilihan lain adalah dengan menggunakan CSS 3 transform:
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
Catatan
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
Sayangnya — tapi tidak mengejutkan — solusi lebih rumit dari satu akan berharap untuk menjadi. Juga sayangnya, anda'll perlu menggunakan tambahan div sekitar div yang anda inginkan di tengah secara vertikal.
Untuk standar-compliant browser seperti Mozilla, Opera, Safari, dll. anda perlu mengatur outer div yang akan ditampilkan sebagai tabel dan dalam div yang akan ditampilkan sebagai table-cell — yang kemudian dapat di tengah secara vertikal. Untuk Internet Explorer, anda perlu posisi batin div benar-benar dalam outer div dan kemudian tentukan top sebagai 50%. Halaman berikut menjelaskan teknik ini dengan baik dan memberikan beberapa kode sampel terlalu:
Ada juga teknik untuk melakukan centering vertikal menggunakan JavaScript. Vertikal keselarasan konten dengan JavaScript & CSS menunjukkan hal itu.
Solusi termudah adalah di bawah ini:
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align:center;
border:1px solid red;
}
<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>
Jika seseorang peduli untuk Internet Explorer 10 (dan kemudian) saja, gunakan flexbox
:
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>
Flexbox dukungan: http://caniuse.com/flexbox
Cara modern untuk pusat elemen vertikal akan menggunakan flexbox
.
Anda memerlukan orang tua untuk menentukan ketinggian dan anak-anak ke pusat.
Contoh di bawah akan pusat div ke pusat dalam browser anda. Apa's penting (dalam contoh saya) adalah untuk mengatur height: 100%
ke tubuh
dan html
dan kemudian min-height: 100%
ke wadah.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}
<div id='center_container'>
<div id='center'>I am center.</div>
</div>
Jika anda don't peduli tentang Internet Explorer 6 dan 7, anda dapat menggunakan teknik yang melibatkan dua kontainer.
display: tabel;
display: table-cell;
vertical-align: middle;
display: inline-block;
Anda dapat menambahkan konten apapun yang anda ingin isi kotak tanpa peduli tentang ukuran lebar atau tinggi!
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
Lihat juga [ini Biola][1]!
Jika anda ingin ke pusat baik secara horizontal maupun secara vertikal, anda juga perlu berikut.
text-align: center;
text-align: left;
atau text-align: right;
, kecuali jika anda ingin teks yang akan berpusat<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
Lihat juga [ini Biola][2]!
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
}
<body>
<div class="vertical">Vertically left</div>
<div class="horizontal">Horizontal top</div>
<div class="center">Vertically Horizontal</div>
</body>
Terkait: Center Image
Ini selalu di mana saya pergi ketika saya harus kembali ke masalah ini.
Bagi mereka yang don't ingin membuat lompatan:
position:relative
atau posisi:absolut
.posisi:absolut
dan top:50%
pada anak wadah untuk bergerak ke atas ke bawah ke tengah-tengah orang tua.Contoh dari hal ini dalam kode:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Saya hanya menulis ini CSS dan untuk mengetahui lebih lanjut, silakan pergi melalui: artikel Ini dengan menyelaraskan vertikal apa-apa dengan hanya 3 baris CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Menggunakan flex properti CSS.
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>
atau dengan menggunakan display: flex;
dan margin: auto;
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
}
.child {
width: 75px;
height: 75px;
background: yellow;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>
menampilkan teks center
.parent {
width: 400px;
height: 200px;
background: yellow;
display: flex;
align-items: center;
justify-content:center;
}
<div class="parent">Center</div>
Menggunakan persentase(%) tinggi dan lebar.
.parent {
position: absolute;
height:100%;
width:100%;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>
Jawaban dari Billbad hanya bekerja dengan tetap lebar .batin
div.
Solusi ini bekerja untuk lebar dinamis dengan menambahkan atribut text-align: center
untuk .luar
div.
.outer {
position: absolute;
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
display: inline-block;
width: auto;
}
<div class="outer">
<div class="middle">
<div class="inner">
Content
</div>
</div>
</div>
Link berikut menyajikan cara yang mudah untuk melakukan hal itu hanya dengan 3 baris di CSS anda:
Menyelaraskan vertikal apa-apa dengan hanya 3 baris CSS.
Kredit: Sebastian Ekström.
Aku tahu pertanyaan sudah menjawab namun aku melihat utilitas pada link untuk kesederhanaan.