Wie kann ich ein absolut positioniertes Element in einem div zentrieren?

Question

Ich muss eine div (mit position:absolute; ) Element in der Mitte meines Fensters. Aber ich habe Probleme dabei, weil das Breite ist unbekannt .

Ich habe das ausprobiert. Aber es muss angepasst werden, da die Breite reaktionsfähig ist.

.center {
  left: 50%;
  bottom: 5px;
}

Wie kann ich das tun?

Answer 1

Ich verstehe, dass diese Frage bereits ein paar Antworten hat, aber ich habe nie eine Lösung gefunden, die in fast allen Klassen funktionieren würde, die auch Sinn macht und elegant ist, so hier ist meine nehmen nach zwicken ein Bündel:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Es heißt: "Gib mir eine top: 50% und eine left: 50% dann transformieren (Raum schaffen) auf der X/Y-Achse in die -50% Wert, in gewissem Sinne "einen Spiegelraum schaffen".

Auf diese Weise entsteht an allen vier Punkten eines Divs, das immer ein Kasten ist (vier Seiten hat), der gleiche Raum.

Dies wird:

1. Arbeiten Sie, ohne die Höhe/Breite des Elternteils kennen zu müssen.
2. Arbeiten Sie an responsive.
3. Arbeiten Sie entweder auf der X- oder der Y-Achse. Oder beides, wie in meinem Beispiel.
4. Ich kann mir keine Situation vorstellen, in der das nicht funktionieren würde.

Answer 2

Flexbox kann verwendet werden, um ein absolut positioniertes div zu zentrieren.

display: flex;
align-items: center;
justify-content: center;

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Answer 3

Es ist möglich, dass Zentrum ein Element, das die aspect-ratio:1 con Position absolut durch die Verwendung von calc()

Im folgenden Beispiel verwende ich einen Kreis, weil er einfacher zu erklären und zu verstehen ist, aber das gleiche Konzept kann auf jede Form angewendet werden mit aspect-ratio:1 was bedeutet, dass die width et height gleich sind. ( über das Seitenverhältnis )

:root{
  --diameter: 80px;
}
div{
  position:absolute;
  top: calc(50% - var(--diameter)/2);
  right:calc(50% - var(--diameter)/2);
  aspect-ratio:1;
  width:var(--diameter);
  border-radius:100%;
  background:blue;
}

<div/>

Erläuterung

Answer 4

Dies ist eine Mischung aus anderen Antworten, die bei uns funktioniert haben:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

Answer 5

Dies funktioniert mit jeder beliebigen unbekannten Breite des absolut positionierten Elements, das Sie in der Mitte Ihres Containerelements haben möchten:

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}