Question

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

580px

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

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

Answer 1

位置#main格。

#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>

Answer 2

您可以在顶级元素上尝试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>

Answer 3

#main{

}
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
.justify {
    text-align:justify;
}

<div id="main" class="center">
<div class="justify">
<b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. so don't forget that, hope this help you
</div>
</div>

<p class="justify">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

用CSS将宽度和高度百分比的div元素居中

3 个答案: