У меня есть дочерний элемент в родительском контейнере. Я хотел бы, чтобы ребенок был помещен из центра контейнера, а не из его верхнего левого угла. Вот базовая схема:
x x x x x x x x x x x x x x x x x x x
.parent x x
{ x x
position: absolute; x x
} x x
x x
.child x . x
{ x | x
position: absolute; x top: 50px | x
top: 50px; x v----->x x x x
left: 50px; x left: 50px x x x
} x x x x x
x x
x x x x x x x x x x x x x x x x x x x
Как я могу достичь этого в чистом css?
Вы не можете официально изменить опорную точку позиционирования, но вы можете позиционировать в этой центральной точке, а затем использовать margin
чтобы приблизиться к вашему намерению:
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: 50px;
margin-left: 50px;
}
В CSS нет возможности изменить контрольную точку сверху или снизу и слева или справа на другую позицию. Вот как работает CSS.
Единственная возможность здесь - работать с дополнительным margin
, например:
.child {
left: 50%;
margin: 50px 0 0 50px;
position: absolute;
top: 50%;
}
Просто для удовольствия, вы также можете сделать это с помощью преобразований:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.parent {
width: 100%;
height: 500px;
background-color: #ffa;
position: absolute;
width: 500px;
height: 400px;
background: #e7e7e7;
}
.child {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
height: 2em;
width: 2em;
background-color: #000;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>