Saya ingin pusat div yang di dalam div lain.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Ini adalah CSS yang saya gunakan saat ini.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Seperti yang anda lihat,pendekatan yang saya gunakan sekarang tergantung pada nilai-nilai lebar dan tinggi innerDiv
.Jika lebar/tinggi perubahan, saya harus memodifikasi margin-top
dan margin-left
nilai-nilai.Apakah ada solusi generik yang dapat saya gunakan untuk pusat innerDiv
selalu terlepas dari ukurannya?
Saya tahu bahwa menggunakan margin:auto
dapat horizontal allign innerDiv ke tengah.Tetapi apa yang tentang vertikal allign tengah?
Menyelaraskan vertikal tengah bekerja, tetapi anda akan memiliki untuk menggunakan table-cell
pada elemen induk dan inline-block
pada anak.
Solusi ini tidak akan bekerja di IE6 & 7.
Anda adalah cara yang lebih aman untuk pergi untuk itu.
Tapi karena anda tagged pertanyaan anda dengan CSS3 dan HTML5 aku berpikir bahwa anda don't pikiran menggunakan solusi modern.
Solusi klasik (table layout)
Ini asli saya menjawab. Ini masih bekerja dengan baik dan merupakan solusi dengan dukungan terluas. Tabel-tata letak akan berdampak pada kinerja rendering]2 jadi saya akan menyarankan bahwa anda menggunakan salah satu dari lebih modern solusi.
[Berikut ini adalah contoh][3]
Diuji pada:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Solusi Modern (transform)
Sejak transformasi cukup baik didukung now ada cara yang lebih mudah untuk melakukannya.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
[Demo][5]
♥ favorit saya solusi modern (flexbox)
Saya mulai menggunakan flexbox lebih dan lebih yang juga didukung now Yang jauh cara termudah.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Banyak lagi contoh-contoh & kemungkinan: Bandingkan semua metode pada satu halaman
Outer Div harus menetapkan posisi
untuk relatif
atau tetap
, dan Batin Div harus menetapkan posisi
untuk mutlak
, top
dan kiri
untuk 50%
dan menerapkan transform: translate(-50%, -50%)
.
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="cn">
<div class="inner">
test
</div>
</div>
Diuji pada:
Menyelaraskan vertikal apa-Apa dengan hanya 3 baris CSS
HTML
<div class="parent-of-element">
<div class="element">
<p>Hello</p>
</div>
</div>
Sederhana
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
CSS
.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}
.element {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Menurut shouldiprefix ini hanya awalan yang anda butuhkan
Anda juga dapat menggunakan % sebagai nilai untuk 'tinggi' milik .orang tua-dari-elemen, asalkan orang tua dari elemen memiliki ketinggian atau beberapa konten yang memperluas ukuran vertikal.
Bukannya mengikat diri dalam sebuah simpul dengan sulit-untuk-menulis dan keras-untuk-menjaga CSS (yang juga perlu berhati-hati cross-browser validasi!) Saya merasa jauh lebih baik untuk menyerah pada CSS dan menggunakan bukan luar biasa sederhana HTML 1.0:
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" id="innerDiv">
</td>
</tr>
</table>
Ini menyelesaikan semuanya asli poster wanted, dan lebih kuat dan dipelihara.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}
#innerDiv{
background:cyan;
width: 284px;
height: 290px;
}
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>
anda dapat melakukannya dengan hanya menambahkan style css yang disebutkan di atas. Semua yang terbaik. Untuk pertanyaan silahkan komentar
Saya pribadi lebih suka trik menggunakan tersembunyi pseudo element untuk menjangkau ketinggian penuh dari luar wadah, dan secara vertikal menyelaraskan dengan konten lain. Chris Coyier memiliki artikel bagus di teknik. http://css-tricks.com/centering-in-the-unknown/ Keuntungan besar dari hal ini adalah skalabilitas. Anda don't harus mengetahui ketinggian konten atau khawatir tentang hal itu tumbuh/menyusut. Ini solusi timbangan :).
Berikut ini's biola dengan semua CSS anda'll perlu dan contoh kerja. [
][2].center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
Hanya mengatur wadah untuk display:table
dan kemudian dalam item untuk display:table-cell
. Mengatur tinggi
pada wadah, dan kemudian mengatur vertical-align:middle
pada bagian dalam produk. Ini memiliki kompatibilitas yang luas kembali sejauh hari dari IE9.
Hanya perhatikan bahwa perataan vertikal akan tergantung pada ketinggian wadah induk.
.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>
Ketika anda tinggi
tidak diatur (auto); anda dapat memberikan batin div beberapa padding (atas dan bawah) untuk membuat vertikal pusat:
<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>
Ini bekerja untuk saya. Width dan hight luar div dapat didefinisikan.
Di sini kode:
.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}
.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>
Saya telah menggunakan solusi berikut 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>
Biola Link <
>Mencoba
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}
Jika anda masih tidak't memahami setelah membaca luar biasa jawaban yang diberikan di atas.
Berikut ini adalah dua contoh sederhana bagaimana anda bisa mencapainya.
[Menggunakan display: table-cell][1]
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>
[Menggunakan flex-kotak (display: flex)][2]
.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>
Catatan: Periksa kompatibilitas browser display: table-cell dan flex sebelum menggunakan yang disebutkan di atas implementasi.
enter image description here 100% bekerja
.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}
<div class="div1">
<div class="div2">
sdfd
</div>
</div>
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background-color: lightgrey;
}
#innerDiv{
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
background-color: grey;
}
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Anda dapat melakukan ini dengan sederhana javascript (jQuery) blok.
CSS:
#outerDiv{
height:100%;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
});
</script>
Ini akan bekerja dengan cara kembali ke IE6!
<!DOCTYPE html>
diperlukan pada IE6 juga!
[ akan memaksa IE6 default ketat mode juga ].
( tentu saja, kotak mewarnai adalah untuk tujuan demo saja )
#outer{
width: 205px;
height: 205px;
margin: auto;
text-align: center;
}
#inner{
text-align: left;
vertical-align: middle;
width: 120px;
height: 120px;
display: inline-block;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,128,255,.6)}
<div id=outer>
<div id=center></div><div id=inner> The inner DIV
</div>
</div>
Anda dapat pusat div vertikal dan horizontal pada CSS menggunakan flex;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;
}
Dan yang kedua adalah sebagai berikut;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}
#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}
Dan hasil HTML:
<div id="outerDiv">
<div id="innerDiv"></div>
</div>