如何将 header 放在居中的 div 之上？ (html/css)

Question

我是编码方面的新手，我已经设法弄清楚了一些事情，但这件事深深地困扰着我，因为我似乎找不到解决方案。

我在页面上有一个水平居中和垂直居中的 div。我想在它上面放置一个 header，而不会使主 div 偏心。

现在的样子（整体居中）：

我希望它看起来如何（黄色居中，蓝色 header 在顶部）：

.. 基本代码：

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.header {
  width: 1000px;
  height: 100px;
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
}
.main {
  width: 1000px;
  height: 500px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}

<div class="outer">
  <div class="middle">
    <div class="header"></div>
    <div class="main">
    </div>
  </div>
</div>

Answer 1

这很可能不是最佳答案，但这是一个开始。基本上我使用 this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.

将容器居中

HTML

<div class="centered-container">
    <div class="header">
        header stuff
    </div>
    <div class="content">
        Content stuff here.
  </div>
</div>

CSS

body {
  background: #600;
}

.centered-container {
  position: absolute;
  left: 50%;
  top: 50%;
  top: calc(50% - 50px);
  transform: translate(-50%, -50%);
  width: 600px;
  background: red;
  color: white;
  text-align: center;
}

.header {
    height:100px;
    background:blue;
}

.content {
    height:300px;
    background:teal;
}

fiddle here.

我将内容设置为 600px 宽，300px 高，header 100px 高，这样更容易看清。负边距

Answer 2

<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
    <style>
        /** Web browsers load whatever is in the <head> tag FIRST
        */

        .outer {
          display: table;
          position: absolute;
          height: 100%;
          width: 100%;
        }

        .middle {
          display: table-cell;
          vertical-align: middle;
        }

        /* You can use "margin: 0 auto;" to center this object.
        * No need for left and right margin centering.
        *
        * Also, set the position to be relative then try adding your heading object
        */
        .header {
          width: 1000px;
          height: 100px;
          background-color: blue;
          margin: 0 auto;
          position: relative;
        }

        /* You don't need the margin to be 0 auto on both right and left
        * if you have the width 100%
        */

        .main {
          width: 100%;
          height: 500px;
          background-color: yellow;
          margin: 0;
        }

    </style>
</head>

<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the 
header. -->
<body>
    <div class="outer">
      <div class="middle">
        <div class="header"></div>
        <div class="main">
        </div>
      </div>
    </div>
</body>

如何将 header 放在居中的 div 之上？ (html/css)

How to place a header on top of centered div? (html/css)

html

css

header

center