Am o div
tag-ul cu "lățime" setat la 800 pixeli. Atunci când browser-ul lățimea este mai mare decât 800 pixeli, nu ar trebui't întinde div
, dar ar trebui să-l aducă la mijlocul paginii.
position: absolute "și apoi" de sus:50% " și " stânga:50% locuri de marginea de sus la verticală centrul ecranului, și marginea din stânga la centrul orizontal, apoi adăugând
margin-top negativ de la o înălțime de div, și anume, -100 schimburi-l mai sus de 100 și în mod similar pentru margin-left
. Acest lucru devine div
exact în centrul paginii.
#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 soluție este calea de a merge în/din 2015. justifica-conținut: centru
este folosit pentru elementul părinte pentru a alinia conținutul de centru.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Ieșire
.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>
Vrei să spui că vrei să-centru vertical sau orizontal? Ai spus ca ai specificat "înălțimea" la 800 de pixeli, și a vrut div nu să se întindă atunci când "lățime" a fost mai mare decât asta...
La centrul orizontal, puteți utiliza margin: auto;
atribut în CSS. De asemenea,'ll trebuie să asigurați-vă că "corpul" și html
elemente don't au orice marjă sau orice padding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Pentru a face, de asemenea, funcționează corect în Internet Explorer 6 trebuie să fac după cum urmează:
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;
}
Pur și simplu utilizați "centru", etichetă după "corpul" tag-ul, și să pună capăt "centru", tag-ul chiar înainte de "corp" se încheie:
<body>
<center>
... Your code here ...
</center>
</body>
Aceasta a lucrat pentru mine cu toate browserele am încercat.
Div centrat pe verticală și pe orizontală în interiorul părinte fără fixare la dimensiunea de conținut
Aici, pe această pagină este o imagine de ansamblu frumos cu mai multe soluții, prea mult cod pentru a împărtăși aici, dar ea arată ceea ce este posibil...
Personal îmi place această soluție cu celebrul transforma traduce -50% truc cel mai mult. Aceasta funcționează bine pentru ambele fix (% sau px) și nedefinit înălțimea și lățimea elementului.
Codul este la fel de simplu ca:
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;
}
[Aici o vioară][3] care arată că funcționează
Adăugați această clasă la div vrei centrat (pe care ar trebui să aibă un set lățime):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Sau, se adaugă marja de chestii la div class, astfel:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Utilizați CSS flex proprietate:
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Alte pre-existente setari din vechiul cod, care va preveni div pagina de centrare L&R sunt:
img
(ca vârstă CSS extern format print controale).div
clasa.Centrarea fără a preciza div lățime:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Acest lucru este ceva de genul `
<h1>
) de <center>
va, de asemenea, situat în centrudisplay:block
setare) în funcție de browser-ul implicitDacă aveți unele de conținut regulate, și nu doar o singură linie de text, singurul posibil motiv pentru care știu că este de a calcula marja.
Aici este un exemplu:
<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;
}
Deci, #supercontainer
ta e "toată pagina"
și lățime
este 1200px
.
#middlecontainer
este div
cu conținutul site-ului; - l's lățime
102px
. În cazul în care "lățime" de conținut este cunoscut, aveți nevoie pentru a împărți pagina's dimensiunea de 2, și să scadă jumătate din conținutul's "lățime" din rezultatul:
1200 / 2 - (102 / 2) = 549;
Da, am'm, de asemenea, văzând că acest lucru este der grosse eșua din CSS.
Folosesc justifica-conținut " și " alinierea obiectelor la orizontală și pe verticală a alinia o 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%" pentru "body" tag-ul este doar un exemplu. Într-un proiect real se poate elimina această proprietate.
Folosiți codul de mai jos pentru centrarea div cutie:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>