Saya memiliki div
tag dengan lebar
set untuk 800 piksel. Ketika browser lebar lebih besar dari 800 piksel, seharusnya't meregangkan div
, tetapi harus membawanya ke tengah-tengah halaman.
posisi: absolut
dan kemudian top:50%
dan left:50%
tempat-tempat di tepi atas di bagian vertikal tengah layar, dan tepi kiri di tengah horizontal, maka dengan menambahkan margin-top
negatif dari ketinggian div, yaitu -100 pergeseran itu di atas dengan 100 dan demikian pula untuk margin-left
. Ini mendapat div
persis di tengah halaman.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
Modern Flexbox solusi adalah cara untuk pergi di/dari 2015. membenarkan-content: center
digunakan untuk elemen induk untuk menyelaraskan konten ke pusat itu.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Output
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Apakah anda berarti bahwa anda ingin ke pusat itu vertikal atau horizontal? Anda mengatakan anda tentukan tinggi
untuk 800 piksel, dan ingin div bukan untuk meregangkan ketika lebar
adalah lebih besar dari yang...
Untuk pusat horizontal, anda dapat menggunakan margin: auto;
atribut pada CSS. Juga, anda'll harus memastikan bahwa tubuh
dan html
elemen don't memiliki margin atau padding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Untuk membuat hal ini juga bekerja dengan benar di Internet Explorer 6 yang harus anda lakukan sebagai berikut:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
Div berpusat secara vertikal dan horizontal di dalam satu induk tanpa memperbaiki isi ukuran
Di sini pada halaman ini adalah gambaran yang baik dengan beberapa solusi, terlalu banyak kode untuk berbagi di sini, tapi itu menunjukkan apa yang mungkin...
Secara pribadi saya suka solusi yang terkenal dengan mengubah menerjemahkan -50% trik yang paling. Ia bekerja dengan baik untuk investasi tetap (% atau px) dan terdefinisi tinggi dan lebar dari elemen anda.
Kode sederhana seperti:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
[Di sini biola][3] yang menunjukkan bahwa ia bekerja
Menambahkan kelas ini untuk div yang anda inginkan terpusat (yang harus memiliki lebar set):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Atau, tambahkan margin hal-hal untuk anda div kelas, seperti ini:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Gunakan CSS flex properti:
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Beberapa lainnya sudah ada setup dari tua kode yang akan mencegah div halaman berpusat L&R adalah:
img
(seperti untuk anak eksternal CSS cetak format kontrol).div
kelas.Berpusat tanpa menentukan div lebar:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Ini adalah sesuatu seperti <center>
tag tidak, kecuali:
<h1>
) dari <center>
juga akan diposisikan untuk pusatdisplay:block
setting) sesuai dengan browser defaultJika anda memiliki beberapa konten biasa, dan tidak hanya satu baris teks, satu-satunya alasan yang mungkin saya tahu adalah untuk menghitung margin.
Berikut ini sebuah contoh:
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
Jadi, #supercontainer
adalah "seluruh halaman"
dan lebar
adalah 1200px
.
#middlecontainer
adalah div
dengan konten situs anda; itu's lebar
102px
. Dalam kasus lebar
konten dikenal, anda perlu untuk membagi halaman's ukuran untuk 2, dan mengurangi setengah dari isi's lebar
dari hasil:
1200 / 2 - (102 / 2) = 549;
Ya, aku'm juga melihat bahwa ini adalah der grosse gagal CSS.
Gunakan membenarkan-content
dan menyelaraskan-barang
untuk horizontal dan vertikal menyelaraskan div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
"width:100%;" untuk "body" tag ini hanya untuk contoh. Dalam proyek nyata anda dapat menghapus properti ini.