代码之家 › 专栏 › 技术社区 › M.H Mighani

用css使div元素以百分比宽度和高度居中

css html

M.H Mighani · 技术社区 · 7 年前

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

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

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

我试过很多方法,但是没有一种对我有效,很多方法都是将元素水平放置在中心,而不是垂直放置。

3 回复 | 直到 7 年前

vanngoh 7 年前

你可以试试 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>

Anuresh VP 7 年前

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

falconimogollon 7 年前

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