Cel mai bun mod de a de centru o `
Știu că margin-left: auto; margin-right: auto;
se va axa pe orizontală, dar ceea ce este cel mai bun mod de a o face pe verticală, prea?
Trucul principal in acest demo este că, în fluxul normal al elementelor merge de sus în jos, astfel încât margin-top: auto este setat la zero. Cu toate acestea, o poziționate absolut element acționează la fel pentru distribuția de spațiu liber, și în mod similar poate fi centrat pe verticală la o anumită
sussi
jos` (nu funcționează în IE7).
div
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Chiar dacă acest lucru nu funcționează atunci când OP pus această întrebare, cred că, pentru browserele moderne, cel puțin, cea mai bună soluție este de a utiliza display: flex sau pseudo-clase.
Puteți vedea un exemplu în următoarele [vioara](
). Aici este [actualizat vioara](287/).Pentru pseudo-clase un exemplu ar putea fi:
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
Utilizarea display: flex, în conformitate cu css-trucuri și MDN este după cum urmează:
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
Există și alte atribute disponibile pentru flex, care sunt explicate în link-uri de mai sus, cu alte exemple.
Dacă aveți pentru a sprijini browsere mai vechi, care nu't suport css3, atunci ar trebui să utilizați javascript sau lățime/înălțime fixă soluție arătat în alte răspunsuri.
Simplitatea aceasta tehnica este uimitoare: (Această metodă are implicațiile sale, deși, dar dacă aveți nevoie doar să center element, indiferent de fluxul de restul conținutului, l's bine. Utilizați cu grijă)
Marcaj:
<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>
Și 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%);
}
Acest lucru va center element orizontal și vertical. Nu marjelor negative, doar puterea de a transforma. De asemenea, ar trebui să uităm despre IE8 ar trebui't noi?
Mi-ar folosi "traduce":
Prima poziție div's colțul din stânga sus, în centrul paginii (folosind position: fixed; top: 50%; stânga: 50%
). Apoi, "traduce" miscari de 50% din div's înălțimea la centru vertical pe pagină. În cele din urmă, traduce, de asemenea, se mută div pentru dreptul de 50% de l's grosimea la centru pe orizontală.
De fapt, cred că această metodă este mai bine decât mulți alții, deoarece nu are nevoie de orice modificări pe elementul părinte.
"traduce" este mai bine decât `translate3d în unele scenarii din cauza aceasta fiind susținută de un număr mai mare de browsere. http://caniuse.com/#search=translate
Pentru a rezuma, această metodă este susținută pe toate versiunile de Chrome, Firefox 3.5+, Opera 11.5+, toate versiunile de Mozilla, IE 9+, și de Margine.
<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;
}
Observați, totuși, că această metodă face acest div sta într-un singur loc în timp ce pagina este defilat. Acest lucru poate fi ceea ce vrei, dar dacă nu, nu există o altă metodă.
Acum, dacă vom încerca același CSS, dar cu poziția set de absolut, acesta va fi în centrul ultimul părinte care are o poziție absolută.
<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;
}
Cred că există două moduri de a face un div centru align prin 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 */
}
Acest lucru este simplu și cel mai bun mod. pentru demo va rugam sa vizitati link-ul de mai jos:
http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html
Soluție simplă profitând de 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/
Primul div ocupă tot ecranul și are un afișaj:flex stabilite pentru fiecare browser-ul. Cel de-al doilea div (centrat div) profită de afișare:flex div unde margin:auto funcționează strălucit.
Notă IE11+ compatibilitate. (IE10 w/ prefix).
Dacă sunteți în căutarea la noile browsere(IE10+),
apoi, puteți face uz de a transforma proprietatea de a alinia un div de la centru.
<div class="center-block">this is any div</div>
Și css pentru acest lucru ar trebui să fie:
.center-block {
top:50%;
left: 50%;
transform: translate3d(-50%,-50%, 0);
position: absolute;
}
Prinde aici este că tu nu't chiar trebuie să specificați înălțimea și lățimea de div ca este nevoie de grijă de sine.
De asemenea, dacă doriți să poziționați un div la centru de un alt div, atunci puteți specifica doar funcția de exterior div ca relative și atunci această CSS începe să lucreze pentru div.
Cum funcționează:
Când specificați stânga și de sus la 50%, div merge la trimestrul dreapta jos a paginii cu partea de sus-stânga capăt fixat la centrul paginii. Aceasta deoarece, pe stânga/top proprietăți(atunci când se administrează în %) sunt calculate pe înălțimea exterioară div(în cazul tău, fereastra).
Dar transforma folosește înălțime/lățime a elementului pentru a stabili traducere, așa că div va deplasa spre stânga(50% lățime) și de sus(50% înălțimea), deoarece acestea sunt date în negative, astfel aliniindu-l la centrul paginii.
Dacă aveți pentru a sprijini browsere mai vechi(și îmi pare rău, inclusiv IE9 fel de bine), apoi masa de celule este mai populara metoda de a utiliza.
Meu preferat drumul spre centru-o cutie atât pe verticală cât și pe orizontală, este următoarea tehnică :
ecran: masa;
display: table-cell;
vertical-align: mijloc;
text-align: center;
display: inline-block;
text-align: left; " sau " text-align: right;
, dacă nu doriți ca textul să fie centratEleganta acestei tehnici, este că puteți adăuga conținut la cutie de conținut, fără griji despre înălțimea sau lățimea!
<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;
}
A se vedea, de asemenea, [acest Vioara][1]!
Da, știu că pot realiza mai mult sau mai puțin aceeași flexibilitate cu transforma: translate(-50%, -50%); " sau " transforma: translate3d(-50%,-50%, 0);
, tehnica I'm a propune mult mai bine suport pentru browser-ul. Chiar și cu browsere prefixe ca -webkit
, -ms " sau " - moz
, transforma
nu't oferta destul de același sprijin browser-ul.
Deci, dacă îți pasă browsere mai vechi (de exemplu. IE9 și mai jos), nu ar trebui să utilizați "transforma" pentru poziționare.
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Explicație:
Da o poziționare absolută (părinte ar trebui să aibă poziționare relativă). Apoi, în colțul din stânga sus este mutat la centru. Pentru că tu nu't știu lățime/înălțime încă, puteți folosi css pentru a transforma traduce poziția relativ la mijloc. traduce(-50%, -50%) se reduce x și y poziția de colțul din stânga sus de 50% din lățime și înălțime.
Aici este un script care am scris-o înapoi în timp (este scris folosind biblioteca 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();
};
Folosind Flex-box în opinia mea:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
<div id="parent">
<div id="child">Hello World!</div>
</div>
Vezi tu acolo sunt doar trei proprietăți CSS pe care le au de a utiliza în centru copilul elementul vertical și orizontal. display: center;
Face parte principală doar prin activarea Flex-cutie de afișare, `justifica-conținut: center; "center" copilul elementul vertical și aliniați-elemente: center; "center" l orizontal. Pentru a vedea cel mai bun rezultat am adăuga unele stiluri suplimentare :
#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>
Dacă doriți să aflați mai multe despre Flex-box puteți vizita W3Schools, MDN sau - CSS Trucuri pentru mai multe informații.
Știu că am întârziat la petrecere, dar aici este un mod de a centru un div cu dimensiune necunoscută în interiorul unui părinte de dimensiune necunoscută.
stil:
<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 acest demo.
Acolo este de fapt o soluție, folosind css3, care pot vertical centru un div de necunoscut înălțime. Trucul este de a muta div jos de 50%, apoi utilizați transformY
să-l înapoi până la mijloc. Singura condiție este ca să fie centrat element are un părinte. Exemplu:
<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%);
}
Susținută de toate browserele importante, și ANUME 9 și (don't deranjat despre IE 8, ca a murit împreună cu win xp în această toamnă. Mulțumesc lui dumnezeu.)
[JS Vioara Demo]()
O metodă mai (antiglonț) luate de aici utilizarea 'display:tabelul' regula:
Marcaj
<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;
}
M-am uitat la Laravel's a vizualiza fișiere și a observat că acestea au centrat textul perfect la mijloc. Mi-am amintit despre această întrebare imediat. Acest lucru este cum au făcut-o:
<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>