Jak wyśrodkować absolutny div w poziomie za pomocą CSS?

Mam element div i chcę, aby był wyśrodkowany w poziomie - chociaż podam, margin:0 auto;że 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;
}

Musisz ustawić left: 0i right: 0.

Określa, jak daleko przesunąć krawędzie marginesów od boków okna.

Podobnie jak „góra”, ale określa, jak daleko prawa krawędź marginesu pola jest odsunięta w stosunku do [lewej / prawej] [prawej / lewej] krawędzi bloku zawierającego pole.

Źródło: http://www.w3.org/TR/CSS2/visuren.html#position-props

Uwaga: element musi mieć szerokość mniejszą niż okno, w przeciwnym razie zajmie całą szerokość okna.

Jeśli możesz użyć zapytań o media, aby określić minimalny margines, a następnie przejść do autodla większych rozmiarów ekranu.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

To nie działa w IE8, ale może być opcją do rozważenia. Jest to przydatne przede wszystkim, jeśli nie chcesz określać szerokości.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Chociaż powyższe odpowiedzi są poprawne, ale aby ułatwić początkującym pracę, wystarczy ustawić margines, lewy i prawy. następujący kod zrobi to pod warunkiem, że szerokość jest ustawiona, a pozycja jest bezwzględna:

margin: 0 auto;
left: 0;
right: 0;

Próbny:

.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>

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>

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

tak łatwe, 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 wskazówce => Jak ustawić element div na środku w blogu html- Obinb

Oto link, użyj go, aby ustawić div w środku, jeśli pozycja jest bezwzględna.

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

Nie możesz używać margin:auto;na position:absolute;elementach, po prostu usuń go, jeśli go nie potrzebujesz, jednak jeśli to zrobisz, możesz użyć left:30%;((100% -40%) / 2) i zapytań o media dla wartości maksymalnych i minimalnych:

.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;
    }

}