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>

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

标签： htmlcss

Answer 1

位置#maindiv。

#main{
    height: 70%;
    width: 80%;
    max-width: 580px;
    min-height: 280px;
    background: bisque;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

}

<div id="main">
    My Calculator
</div>