Question

让我们说我有一个简单的html页面：

<div class="main">
    <div class="header">
        <h1>HEADER</h1>
    </div>
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

我的页眉是固定的，内容应该在其下面，并且高度应为身体剩余高度的100％。
我已经用这种风格做到了：

*{
    margin-left: 0;
    margin-top: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.header {
    background-color: red;
    text-align: center;
    position: fixed;
    width: 100%;
}

.content {
    background-color: antiquewhite;
    padding-top: 38px;
}

h1 {
    margin-bottom: 0;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    flex: 1;
}

.box {
    width: 150px;
    height: 150px;
    background-color: yellow;
}

现在是该页面的外观：https://elbargho.github.io/sudoku/centerdiv.html
现在我正在尝试将box div相对于整个主体水平和垂直居中-标头大小
我尝试做的事情：

利润率最高：50％-由于某种原因，包装箱一直下降到底部
将content div的位置设置为相对位置，将box div的位置设置为绝对位置-content div的位置与固定的header重叠

Answer 1

您可以将内容类别设置为

.content {
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

*{
    margin-left: 0;
    margin-top: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.header {
    background-color: red;
    text-align: center;
    position: fixed;
    width: 100%;
}

.content {
    background-color: antiquewhite;
    padding-top: 38px;
}

h1 {
    margin-bottom: 0;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    /*flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.box {
    width: 150px;
    height: 150px;
    background-color: yellow;
}

<div class="main">
    <div class="header">
        <h1>HEADER</h1>
    </div>
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

Answer 2

这可能是您需要的。记录在代码中。

* {
  margin-left: 0;
  margin-top: 0;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Modified */
.header {
  background-color: red;
  text-align: center;
  /* position: fixed; */
  position: sticky;
  width: 100%;
}

.content {
  background-color: antiquewhite;
  padding-top: 38px;
}

h1 {
  margin-bottom: 0;
}

/* Modified */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
}

/* Modified */
.content {
  /*flex: 1;*/
  display: flex;
  align-items: center;
  height: inherit;
}

.box {
  width: 150px;
  height: 150px;
  background-color: yellow;
}

<div class="main">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <div class="box">
    </div>
  </div>
</div>

Answer 3

解决方法：

.content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

Answer 4

一种方法是使用CSS转换。

select
    t.id,
    max(t.repeat_cycle)
from
    table t
group by
    t.id

查看此网站以获取所有CSS居中帮助： http://howtocenterincss.com/

将div垂直居中放置在另一个div中

4 个答案: