Jak wyśrodkować element potomny w CSS, nawet jeśli jest większy niż nadrzędny?

Question

Chciałbym utworzyć klasę css, aby element div mógł zostać umieszczony w centrum jego rodzica. Kod używam jest:

.centered { 
    position: absolute; 
    margin: auto; 

    bottom: 0px; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
} 

To działa, jeśli rodzic jest większy niż element dziecięcej lub ma taki sam rozmiar: https://jsfiddle.net/cy8dn1km/

Ale jeśli dziecko jest większe, to jego środek nie jest umieszczony w centrum rodzica. Zamiast ich lewej granice będą w tym samym miejscu, a element dziecko zostanie przedłużona tylko do prawej:

https://jsfiddle.net/797L7nce/

Coś jest nie tak z poziomego centrowania.

Jak można naprawić za pomocą samego CSS (bez użycia transformacji CSS 2D/3D) bez dodawania nowych elementów kontenera?

Answer 1

Oto rozwiązanie bez użycia CSS transformacje 2D/3D. Możesz użyć display: flex z flex-direction: column (jest to ważne) na elemencie nadrzędnym i display: table na elemencie podrzędnym.

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: green; 
 
} 
 
.centered.d1 { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.d1 { 
 
    background: yellow; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.d2 { 
 
    background: red; 
 
    opacity: 0.7; 
 
    width: 250px; 
 
    height: 250px; 
 
    display: table; 
 
}

<div class="centered d1"> 
 
    <div class="centered d2"></div> 
 
</div>

Answer 2

Jeśli znasz wymiar elementów, możesz użyć lewej/górnej pozycji przy 50% z marginesami ujemnymi o połowie wielkości elementu.

mam zaktualizowane skrzypce tutaj: https://jsfiddle.net/797L7nce/2/

.centered { 
    position: absolute; 
    display: block; 
    left:50%; 
    top:50%; 

} 

.d1 { 
    background: yellow; 
    width: 50px; 
    height: 50px; 
    margin-left:-25px; 
    margin-top:-25px; 
} 

.d2 { 
    background: red; 
    opacity: 0.7; 
    width: 250px; 
    height: 250px; 
    margin-left:-125px; 
    margin-top:-125px; 
} 

Answer 3

Dodaj left: 50%; transform: translate(-50%, 0); i usunąć right: 0px;

.centered { 
    position: absolute; 
    margin: auto; 
    display: block; 
    bottom: 0px; 
    top: 0px; 
    left: 50%; 
    transform: translate(-50%, 0); 
} 

Demo

Answer 4

Dodawanie poniżej CSS do .d2 rozwiąże ten problem.

.d2 { 
    background: red; 
    opacity: 0.7; 
    width: 250px; 
    height: 250px; 
    position:absolute; 
    left:50%; 
    margin-left:-125px; 
} 

Można sprawdzić demo here

Answer 5

Ok próbowałem bez 2D CSS:

Zmień absolute do fixed i dodać kilka margin: auto;

JSfiddle here

body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    background: green; 
 
} 
 

 
.centered { 
 
    position: fixed; 
 
    margin: auto; 
 
    display: block; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
} 
 

 
.d1 { 
 
    background: yellow; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.d2 { 
 
    background: red; 
 
    opacity: 0.7; 
 
    width: 250px; 
 
    height: 250px; 
 
}

<div class="centered d1"> 
 
    <div class="centered d2"> 
 

 
    </div> 
 
</div>

Answer 6

jesteś prawie tam.Wystarczy ustawić pozycje bezwzględne do tego samego (duże) liczby ujemnej, aby wystarczająco dużo miejsca na marginesie auto:

.centered { 
    position: absolute; 
    margin: auto; 

    bottom: -9999px; 
    left: -9999px; 
    top: -9999px; 
    right: -9999px; 
} 

https://jsfiddle.net/797L7nce/9/

Answer 7

W Bootstrap 4:

do centrum dziecko poziomo:, użyj klasy bootstrap-4:

justify-content-center 

do centrum dziecko pionowo użyć bootstrap-4 Klasa:

align-items-center 

ale pamiętaj, nie zapomnij użyć d-flex klasy z tymi to bootstrap- 4 klasa użytkowa, tak jak to

<div class="d-flex justify-content-center align-items-center" style="height:100px;"> 
    <span class="bg-primary">MIDDLE</span>  
</div> 

Uwaga: upewnij się, aby dodać bootstrap-4 narzędzi jeśli ten kod nie działa

wiem, że nie jest to bezpośrednia odpowiedź na to pytanie, ale może to pomoże ktoś