Jak wyśrodkować absolutny div poziomo za pomocą CSS?
Mam div I chcę, aby był wyśrodkowany poziomo - chociaż daję mu margin:0 auto;
nie jest wyśrodkowany...
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
8 answers
Musisz ustawić left:0; right:0;
.
Określa, jak daleko przesuwa się krawędź marginesu od boków okna.
Http://www.w3.org/TR/CSS2/visuren.html#position-props
CSS
.container
{
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
}
Uwaga: musisz zdefiniować width
albo ta odpowiedź nie zadziała. Oznacza to, że ta odpowiedź nie jest przydatna dla elementów o dynamicznych szerokościach.
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-11-14 10:49:50
To nie działa w IE8, ale może być opcja do rozważenia. Jest to przede wszystkim przydatne, jeśli nie chcesz określać szerokości.
.element
{
position: absolute;
left: 50%;
transform: translateX(-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
2015-04-13 04:02:49
Chociaż powyższe odpowiedzi są poprawne, ale aby ułatwić początkującym, wszystko, co musisz zrobić, to ustawić margines, lewo i prawo. poniższy kod zrobi to pod warunkiem, że szerokość jest ustawiona, a Pozycja jest absolutna:
margin: 0 auto;
left: 0;
right: 0;
Demo:
.centeredBox {
margin: 0 auto;
left: 0;
right: 0;
/** Position should be absolute */
position: absolute;
/** And box must have a width, any width */
width: 40%;
background: #faebd7;
}
<div class="centeredBox">Centered Box</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
2017-02-27 03:53:46
Flexbox? Możesz użyć flexbox.
.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.box div {
border:1px solid grey;
flex: 0 1 auto;
align-self: auto;
background: grey;
}
<div class="box">
<div class="A">I'm horizontally centered.</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
2016-06-16 02:39:27
.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}
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
2016-06-16 01:44:02
Tak proste, używaj tylko właściwości margin I left, right:
.elements {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
Możesz zobaczyć więcej w tej poradzie = > Jak ustawić element div na środek w html-Obinb blog
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
2016-10-26 14:47:04
Tutaj jest link proszę użyć tego, aby div w środku, jeśli pozycja jest absolutna.
HTML:
<div class="bar"></div>
CSS:
.bar{
width:200px;
border-top:4px solid red;
position:absolute;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}
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
2018-07-31 18:39:17
Nie możesz używać margin:auto;
na position:absolute;
elementach, po prostu usuń je, jeśli nie potrzebujesz, jednak jeśli tak, możesz użyć left:30%;
((100%-40%)/2) i zapytań o media dla wartości max i min:
.container {
position: absolute;
top: 15px;
left: 30%;
z-index: 2;
width:40%;
height: 60px;
overflow: hidden;
background: #fff;
}
@media all and (min-width:960px) {
.container {
left: 50%;
margin-left:-480px;
width: 960px;
}
}
@media all and (max-width:600px) {
.container {
left: 50%;
margin-left:-300px;
width: 600px;
}
}
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
2013-07-31 17:39:46