Vreau să-centru un div
vertical cu CSS. Eu nu't vreau tabele sau JavaScript, dar numai pure CSS. Am găsit niște soluții, dar toate acestea lipsesc Internet Explorer 6 sprijin.
<body>
<div>Div to be aligned vertically</div>
</body>
Cum pot centrul o div
vertical în toate browserele majore, inclusiv Internet Explorer 6?
Mai jos este cel mai bun all-in jurul soluție am putea construi la vertical și orizontal centru de lățime fixă, flexibil înălțime cutie de conținut. Acesta a fost testat și de lucru pentru ultimele versiuni de Firefox, Opera, Chrome și 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>
Vezi Un Exemplu De Lucru Cu Conținut Dinamic
Am construit în unele conținut dinamic pentru a testa flexibilitatea și-ar plăcea să știu dacă cineva vede nici o problemă cu ea. Acesta ar trebui să funcționeze bine pentru centrat suprapuneri, de asemenea, - lightbox, pop-up, etc.
Unul mai pot't vedea pe lista:
.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;
}
Cel mai simplu mod ar fi următoarele 3 linii de CSS:
1) position: relative;
2) de sus: 50%;
3) transforma: translateY(-50%);
Următoarele este o EXEMPLU:
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>
De fapt, ai nevoie de două div's pentru centrarea verticala. Div conține conținut trebuie să aibă o lățime și înălțime.
#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>
Aici este [rezultat][1]
Acum flexbox soluție este un mod foarte ușor pentru browserele moderne, așa că am recomanda acest lucru pentru tine:
.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>
Aceasta este cea mai simplă metodă am gasit si eu folosesc tot timpul ([jsFiddle demo aici][1])
Multumesc Chris Coyier de la CSS Trucuri pentru acest articol.
<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;
}
Începe cu IE8.
La centrul de div de pe o pagină, [check vioara 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;
}
O altă opțiune este de a utiliza flex cutie, [check vioara link][2].
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
.vh { background-color: #ddd; height: 400px; aliniați-elemente: center; display: flex; } .vh > div { width: 100%; text-align: center; vertical-align: mijloc; }
O altă opțiune este de a utiliza un CSS 3 transforma:
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;
}
Note
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
Din păcate — dar nu în mod surprinzător, soluția este mult mai complicată decât și-ar fi dorit să fie. De asemenea, din păcate, nu'll nevoie pentru a utiliza suplimentare divs jurul div vrei centrat vertical.
Pentru standarde conforme cu browsere ca Mozilla, Opera, Safari, etc. trebuie să setați exterior div pentru a fi afișat ca de masă și interior div a fi afișate ca o masă de celule — care pot fi apoi centrat vertical. Pentru Internet Explorer, aveți nevoie pentru a poziția interior div absolut în exterior div și apoi specificați top ca 50%. Următoarele pagini explica aceasta tehnica bine și de a oferi unele mostre de cod asemenea:
Există, de asemenea, o tehnica de a face centrarea verticala folosind JavaScript. Alinierea pe verticală a conținutului cu JavaScript & CSS demonstrează că.
Cea mai simplă soluție este de mai jos:
.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>
Dacă cineva îi pasă de Internet Explorer 10 (și mai târziu), numai, folosesc 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 suport: http://caniuse.com/flexbox
O modalitate modernă de la centru un element vertical ar fi să utilizați flexbox
.
Ai nevoie de un părinte pentru a decide înălțime și un copil de la centru.
Exemplul de mai jos va center-un div cu centrul în browser-ul dumneavoastră. Ce's important (in exemplul meu) este de a stabili height: 100% " la "corp" și "html" și apoi " min-height: 100%
la container.
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>
Dacă tu nu't grijă despre Internet Explorer 6 și 7, puteți utiliza o tehnica care implică două containere.
ecran: masa;
display: table-cell;
vertical-align: mijloc;
display: inline-block;
Puteți adăuga orice conținut pe care doriți să-conținut cutie fără să le pese lățime sau înălțime!
<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;
}
A se vedea, de asemenea, [acest Vioara][1]!
Dacă vrei să-centru atât pe orizontală cât și pe verticală, aveți, de asemenea, nevoie de următoarele.
text-align: center;
text-align: left; " sau " text-align: right;
, dacă nu doriți ca textul să fie centrat<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;
}
A se vedea, de asemenea, [acest Vioara][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>
Related: Center o Imagine
Acest lucru este întotdeauna unde mă duc atunci când trebuie să mă întorc la această problemă.
Pentru cei care don't vreau pentru a face salt:
position:relative " sau " position:absolute
.Un exemplu de acest cod:
<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>
Am scris acest CSS și să știți mai multe, vă rugăm să mergeți prin: Acest articol cu align vertical nimic cu doar 3 linii de CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Folosind flex proprietatea 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>
sau de utilizarea display: flex; " și " 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>
afișare text center
.parent {
width: 400px;
height: 200px;
background: yellow;
display: flex;
align-items: center;
justify-content:center;
}
<div class="parent">Center</div>
Folosind procent(%) înălțime și lățime.
.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>
Răspunsul la Billbad funcționează numai cu o lățime fixă a .interior
div.
Această soluție funcționează pentru o lățime dinamic prin adăugarea atributul text-align: center "la".exterioare
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>
Pe link-ul următor prezintă o modalitate simplă de a face doar cu 3 linii in CSS:
Align Vertical nimic cu doar 3 linii de CSS.
Credite: Sebastian Ekström.
Știu că întrebarea are deja un răspuns, cu toate acestea am văzut utilitate în link-ul pentru simplitatea sa.