Cara terbaik untuk pusat a <div>
elemen pada halaman baik secara vertikal dan horizontal?
Saya tahu bahwa margin-left: auto; margin-right: auto;
akan berpusat pada horizontal, tapi apa adalah cara terbaik untuk melakukannya secara vertikal, juga?
Trik utama dalam demo ini adalah bahwa dalam aliran normal dari unsur-unsur yang terjadi dari atas ke bawah, sehingga margin-top: auto
diatur ke nol. Namun, yang benar-benar diposisikan elemen tindakan yang sama untuk distribusi ruang bebas, dan juga dapat terpusat vertikal di bagian tertentu atas
dan bawah
(tidak bekerja di IE7).
div
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Meskipun ini tidak bekerja ketika OP bertanya pertanyaan ini, saya pikir, untuk browser modern setidaknya, solusi terbaik adalah dengan menggunakan tampilan: flex atau pseudo-class.
Anda dapat melihat contoh berikut ini [biola](
). Berikut ini adalah [updated biola](287/).Untuk pseudo-class contoh bisa:
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
Penggunaan tampilan: flex, menurut css-tricks dan MDN adalah sebagai berikut:
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
Ada atribut lain yang tersedia untuk flex, yang dijelaskan di atas disebutkan link, dengan contoh lebih lanjut.
Jika anda harus mendukung browser lama, yang don't dukungan css3, maka anda mungkin harus menggunakan javascript atau fixed width/height solusi yang ditunjukkan pada jawaban yang lain.
Kesederhanaan dari teknik ini adalah menakjubkan: (Metode ini memiliki implikasi sekalipun, tetapi jika anda hanya perlu untuk pusat elemen terlepas dari aliran seluruh konten, it's baik-baik saja. Gunakan dengan hati-hati)
Markup:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>
Dan CSS:
div {
color: white;
background: red;
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
Ini akan pusat elemen horizontal dan vertikal juga. Tidak ada margin negatif, hanya kekuatan berubah. Juga kita harus sudah lupa tentang IE8 seharusnya't kita?
Saya akan menggunakan menerjemahkan
:
Posisi pertama div's pojok kiri atas di tengah halaman (menggunakan position: fixed; top: 50%; left: 50%
). Kemudian, menerjemahkan
bergerak naik sebesar 50% dari div's tinggi ke tengah secara vertikal pada halaman. Akhirnya, translate juga bergerak div ke kanan sebesar 50% it's lebar ke pusat itu secara horizontal.
Saya benar-benar berpikir bahwa metode ini lebih baik daripada banyak orang lain, karena itu tidak memerlukan perubahan pada elemen induk.
menerjemahkan
lebih baik dari translate3d
dalam beberapa skenario karena itu didukung oleh sejumlah besar browser. http://caniuse.com/#search=translate
Untuk jumlah itu, metode ini mendukung semua versi dari Chrome, Firefox 3.5+, Opera 11.5+, semua versi Safari, IE 9+, dan Edge.
<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}
Perhatikan, bagaimanapun, bahwa metode ini membuat div ini tinggal di satu tempat saat laman sedang menggulir. Ini mungkin apa yang anda inginkan, tetapi jika tidak, ada metode lain.
Sekarang, jika kita mencoba CSS yang sama, tapi dengan posisi yang ditetapkan mutlak, itu akan berada di pusat lalu orang tua yang memiliki posisi absolute.
<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}
Saya pikir ada dua cara untuk membuat sebuah div align center melalui CSS.
.middleDiv {
position : absolute;
width : 200px;
height : 200px;
left : 50%;
top : 50%;
margin-left : -100px; /* half of the width */
margin-top : -100px; /* half of the height */
}
Ini adalah cara sederhana dan terbaik. untuk demo silahkan kunjungi link di bawah ini:
http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html
Solusi sederhana mengambil keuntungan dari Flex Display
<div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
<div id = 'div_you_want_centered' style = 'margin:auto;'>
This will be Centered
</div>
</div>
Check out http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pertama div mengambil seluruh layar dan memiliki display:flex set untuk setiap browser. Kedua div (berpusat div) mengambil keuntungan dari tampilan:flex div mana margin:auto bekerja cemerlang.
Catatan IE11+ kompatibilitas. (IE10 w/ awalan).
Jika anda mencari di browser baru(IE10+),
kemudian anda dapat mengubah properti untuk menyelaraskan div di pusat.
<div class="center-block">this is any div</div>
Dan css ini harus:
.center-block {
top:50%;
left: 50%;
transform: translate3d(-50%,-50%, 0);
position: absolute;
}
Menangkap di sini adalah bahwa anda don't bahkan harus menentukan tinggi dan lebar div dibutuhkan perawatan dengan sendirinya.
Juga, jika anda ingin posisi div di pusat div lain, maka anda hanya dapat menentukan posisi dari luar div sebagai relatif dan kemudian CSS ini mulai bekerja untuk div.
Cara kerja:
Ketika anda menentukan kiri dan di atas 50%, div berjalan di bagian kanan bawah seperempat halaman dengan top-end kiri disematkan di bagian tengah halaman. Hal ini karena, kiri/atas sifat(ketika diberikan dalam %) dihitung berdasarkan ketinggian dari luar div(dalam kasus anda, jendela).
Tapi transform menggunakan tinggi/lebar dari elemen untuk menentukan terjemahan, sehingga anda akan div bergerak ke kiri(50% lebar) dan atas(50% - nya tinggi) karena mereka diberikan secara negatif, sehingga menyelaraskan ke tengah halaman.
Jika anda harus mendukung browser lama(dan maaf seperti IE9 juga) maka sel tabel adalah metode yang paling populer untuk digunakan.
Saya memilih jalan ke tengah kotak baik secara vertikal dan horizontal, adalah teknik berikut :
display: tabel;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
text-align: left;
atau text-align: right;
, kecuali jika anda ingin teks yang akan berpusatKeanggunan dari teknik ini adalah bahwa anda dapat menambahkan konten anda ke dalam kotak konten tanpa khawatir tentang tinggi atau lebar!
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
You can put anything here!
</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][1]!
Ya, saya tahu anda dapat mencapai lebih atau kurang fleksibilitas yang sama dengan transform: translate(-50%, -50%);
atau transform: translate3d(-50%,-50%, 0);
, teknik I'm mengusulkan telah jauh lebih baik dukungan browser. Bahkan dengan browser awalan seperti -webkit
, -ms
atau -moz
, mengubah
doesn't menawarkan cukup sama dukungan browser.
Jadi jika anda peduli tentang browser yang lebih tua (misalnya. IE9 dan di bawah), anda tidak harus menggunakan mengubah
untuk penentuan posisi.
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Penjelasan:
Memberikan posisi absolut (orang tua harus memiliki posisi relatif). Kemudian, pojok kiri atas dipindahkan ke pusat. Karena anda don't tahu lebar/tinggi namun, anda menggunakan css transform untuk menerjemahkan posisi relatif ke tengah. menerjemahkan(-50%, -50%) tidak mengurangi posisi x dan y dari sudut kiri atas sebesar 50% dari lebar dan tinggi.
Berikut ini adalah script yang saya tulis beberapa waktu lalu (hal ini ditulis dengan menggunakan library jQuery):
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};
Menggunakan Flex-kotak dalam pendapat saya:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
<div id="parent">
<div id="child">Hello World!</div>
</div>
Anda melihat hanya ada tiga properti CSS yang anda harus menggunakan untuk pusat anak elemen vertikal dan horizontal. display: center;
Apakah bagian utama dengan hanya mengaktifkan Flex-box display, membenarkan-content: center;
pusat anak elemen vertikal dan menyelaraskan item: center;
center horizontal. Untuk melihat hasil terbaik saya hanya menambahkan beberapa tambahan gaya :
#parent {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
background: yellow;
}
#child {
width: 100px;
height: 100px;
background: silver;
}
<div id="parent">
<div id="child">Hello World!</div>
</div>
Jika anda ingin mempelajari lebih lanjut tentang Flex-kotak yang bisa anda kunjungi W3Schools, MDN atau CSS-Tricks untuk informasi lebih lanjut.
Aku tahu aku terlambat ke pesta tapi di sini adalah cara untuk pusat div dengan dimensi yang tidak diketahui dalam suatu induk dari dimensi yang tidak diketahui.
gaya:
<style>
.table {
display: table;
height: 100%;
margin: 0 auto;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.centered {
background-color: red;
}
</style>
HTML:
<div class="table">
<div class="table-cell"><div class="centered">centered</div></div>
</div>
DEMO:
Check out ini demo.
Sebenarnya ada solusi, dengan menggunakan css3, yang dapat vertikal pusat div dari ketinggian tidak diketahui. Caranya adalah dengan memindahkan div turun sebesar 50%, kemudian menggunakan transformY
untuk mendapatkan kembali ke tengah. Satu-satunya prasyarat adalah bahwa untuk menjadi berpusat pada elemen memiliki orang tua. Contoh:
<div class="parent">
<div class="center-me">
Text, images, whatever suits you.
</div>
</div>
.parent {
/* height can be whatever you want, also auto if you want a child
div to be responsible for the sizing */
height: 200px;
}
.center-me {
position: relative;
top: 50%;
transform: translateY(-50%);
/* prefixes needed for cross-browser support */
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Didukung oleh semua browser utama, dan IE 9 dan up (don't repot-repot tentang IE 8, karena itu meninggal bersama-sama dengan win xp musim gugur ini. Terima kasih tuhan.)
[JS Fiddle Demo]()
Salah satu metode yang lebih (antipeluru) yang diambil dari sini memanfaatkan 'display:meja' aturan:
Markup
<div class="container">
<div class="outer">
<div class="inner">
<div class="centered">
...
</div>
</div>
</div>
</div>
CSS:
.outer {
display: table;
width: 100%;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered {
position: relative;
display: inline-block;
width: 50%;
padding: 1em;
background: orange;
color: white;
}
Saya sedang mencari di Laravel's file view dan melihat bahwa mereka berpusat pada teks dengan sempurna di tengah. Saya teringat tentang pertanyaan ini segera. Ini adalah bagaimana mereka melakukannya:
<html>
<head>
<title>Laravel</title>
<!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->
<style>
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.inside {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="inside">This text is centered</div>
</div>
</body>