我尝试使用flexbox方法、表格方法和其他一些方法来垂直居中一个高度未知的div,但是我的div没有被正确地居中。我希望居中的div宽度为窗口宽度的50%或最小宽度为200像素。
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>