Próba wyśrodkowania div poziomo i pionowo na ekranie [duplikat]
5 answers
Uwaga: Jeśli próbujesz wyśrodkować div poziomo i pionowo, sugerowałbym zajrzenie doflexbox . Nadal będziesz musiał zapewnić wsparcie awaryjne, ale flexbox to przyszłość i to niesamowite.
Aktualizacja: flexbox jest teraz obsługiwany przez wszystkie nowoczesne przeglądarki.
Najpierw musisz dać div statyczną szerokość i wysokość.
Po drugie musisz ustawić position: absolute; i left: 50%; top: 50%; Następnie musisz wykonać margin-left i To połowa wysokości i szerokości. Następnie wyświetli się poprawnie.
CSS:
.centerDiv{
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-30 12:36:58
Ten kod (demo ) pozwala na ustawienie dowolnych width i height, bez konieczności aktualizacji jakichkolwiek innych właściwości (np. top = height / 2) lub poleganie na technikach, które nie są dobrze wspierane (np. display:table;. Jedynym minusem jest brak wsparcia dla starszych wersji IE. Połączenie tego z innym rozwiązaniem tylko dla IE jest prawdopodobnie najlepszym rozwiązaniem.
CSS:
.absoluteCenter {
/* Must manually set width/height */
width:800px;
height:500px;
/* The magic centering code */
margin:auto;
position:absolute;
top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only */
/* Prevent div from overflowing main window */
max-width:100%;
max-height:100%;
overflow:auto;
}
/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
/* Place code here to override all above values, and add IE friendly centering */
}
Oraz HTML:
<div class="absoluteCenter">
Content of DIV
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-15 16:04:59
To czego szukasz to display:table i display:table-cell. Ta opcja powinna wyrównać element # center w elemencie # nadrzędnym niezależnie od wysokości elementu # center. Zakładam, że potrzebujesz wysokości na elemencie #rodzic.
HTML
<div id="parent">
<div id="center">
<h1>Title</h1>
<p>Text will go here.</p>
</div>
</div>
CSS
#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}
#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}
Użyłem tego wczoraj, używając {[2] } na body. Technika ta powinna być zgodna z IE8.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-30 02:10:20
Spróbuj:
.centerDiv{
position: absolute;
top: 50%;
height: 400px;
margin-top: -200px; /* Half of the height */
left: 50%;
width:800px;
margin-left: -400px; /* Half of the width */
border-radius: 5px;
background:#111;
padding:10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-10 22:29:51
Ustaw margines na auto zamiast 0 auto i potrzebujesz wysokości. Myślę, że w 100% do twojego celu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-10 22:31:42