Невозможно установить div 50% height css
У меня проблема. Мне нужно строго расположить мой div по вертикали. Но я не могу установить%, и если я устанавливаю px, это выглядит очень плохо на разных размерах экрана.
Итак,
.parent {
display: block;
max-height: 100% !important;
position: absolute;
top: 0px;
margin-right: 0;
margin-left: 0;
bottom: auto;
left: auto;
right: 15px;
}
.child_button {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}<div class="parent">
<div>
<div class="child_button">Text
</div>
</div>
</div>Таким образом, дочерняя кнопка не переходит на 50% по высоте и перемещается, только если я устанавливаю верхнюю часть в px не в%
Что я делаю неправильно?
Спасибо
-1
задан Turnip
13 August 2018 в 15:50
поделиться
2 ответа
html,
body {
margin: 0;
height: 100%;
}
.parent {
display: block;
height: 100%;
background-color: red;
position: relative;
}
.child_button {
padding: 10px;
display: inline-block;
background-color: white;
position: absolute;
top: calc(50% - 19px);
}<div class="parent">
<div>
<div class="child_button">Text
</div>
</div>
</div>Вы можете настроить значение «calc» в зависимости от высоты вашей кнопки.
1
ответ дан ConsoleLog
15 August 2018 в 16:59
поделиться
Ну, вы переводите / предоставляете маржу вашему ребенку div с точки зрения его собственной высоты, поэтому он не работает.
Самым современным решением, вероятно, будет использование flexbox и
align-items: center;
, но решение Observer работает просто отлично и соответствует вашему коду.
0
ответ дан cyniikal
15 August 2018 в 16:59
поделиться