Как центрировать дочерний элемент в CSS, даже если он больше родителя?

Я хотел бы создать класс css, поэтому div можно поместить в центр его родителя. Код, который я использую:

.centered {
    position: absolute;
    margin: auto;

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

Он работает, если родительский элемент больше дочернего элемента или имеет тот же размер: https://jsfiddle.net/cy8dn1km/

Но если ребенок больше, то его центр не расположен в центре его родителя. Вместо этого их левые границы будут в одном месте, а дочерний элемент будет расширен только справа:

https://jsfiddle.net/797L7nce/

Что-то не так с горизонтальной центрировкой.

Как можно исправить это только с помощью CSS (без использования преобразований 2D/3D CSS) без добавления новых элементов контейнера?

Ответ 1

Вот решение без использования преобразований 2D 2D и 3D. Вы можете использовать display: flex с flex-direction: column (это важный) для родительского элемента и display: table для дочернего элемента.

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>

Ответ 2

Добавьте left: 50%; transform: translate(-50%, 0); и удалите right: 0px;

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

Демо

Ответ 3

Хорошо, я пробовал без 2D CSS:

Измените absolute на fixed и добавьте margin: auto;

JSfiddle здесь

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>

Ответ 4

Если вы знаете размеры элементов, вы можете использовать левое/верхнее положение с 50% с отрицательными полями в два раза меньше размера элемента.

Я обновил вашу скрипку здесь: 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;
}

Ответ 5

Ты почти там. Просто установите абсолютные позиции на то же (большое) отрицательное число, чтобы создать достаточное пространство для поля auto:

.centered {
    position: absolute;
    margin: auto;

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

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

Ответ 6

Добавление ниже CSS в .d2 решит проблему.

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

Вы можете проверить демо здесь