Подскажите, есть ли возможность на css сделать следующее: задать для контейнера max-height
, а внутренний блок чтобы был height:100%
относительно контейнера. При этом контейнер всегда был в центре по вертикали.
Верстаю такое:
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите, есть ли возможность на css сделать следующее: задать для контейнера max-height
, а внутренний блок чтобы был height:100%
относительно контейнера. При этом контейнер всегда был в центре по вертикали.
Верстаю такое:
Про FlexBox: на русском и английском
Поддержка FlexBox caniuse.com
А также рекомендую прочесть про vw
и vh
css-tricks.com viewport-sized-typography
Поддержка caniuse.com
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
/*width: 100vw;*/
/*height: 100vh;*/
min-height: 450px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.content .block {
width: 80%;
height: 80%;
background-color: #ffc0cb;
}
<div class="content">
<div class="block"></div>
</div>
Попробуйте через position: absolute;
и transform: translate(-50%, -50%);
.div {
width: 500px;
height: 80%;
background: #555;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="div"></div>