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;
}
Author: lorem monkey, 2013-07-31
Source

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

Http://jsfiddle.net/SS6DK/

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.

 359
Author: thgaskell,
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%);
}
 107
Author: Adel,
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>
 12
Author: Meta Pakistani,
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>
 5
Author: Ron Royston,
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;
}
 2
Author: Z. Rahman Raju,
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

 2
Author: Neko,
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;
}

Przykład jsfiddle

 0
Author: Amit Kumar,
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;
    }

}
 -1
Author: Leonard Pauli,
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