html - 使用 css 将具有百分比宽度和高度的 div 元素居中

Question

我正在尝试使用 HTML 和 CSS 构建一个计算器界面，我希望主 div 元素始终保持在屏幕的中心，即使我更改屏幕大小时，我希望该元素具有 80% 宽度和 70% 高度，最小高度为 280px，最大宽度为 580px。

#main{
    height: 70%;
    width: 80%;
    max-width:580px;
    min-height:280px;
}

<div id="main">sth
<div>

我尝试了很多方法但没有一个对我有用，很多方法将元素设置在水平中心而不是垂直中心。

Answer 1

你可以在顶级元素上尝试display: flex

希望这对您有所帮助，干杯!

#main {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#calculator {
    top: 50%;
    position: absolute;
    transform: translate(0,-50%);
    text-align: center;
    border: 1px solid #000000;
    height: 70%;
    width: 80%;
    max-width:580px;
    min-height:280px;
}

<div id="main">
  <div id="calculator">sth</div>
</div>