如何在居中的div顶部放置页眉？(html/css)

Question

我是一个编程新手，我已经设法弄明白了一些事情，但这件事让我非常困扰，因为我似乎找不到解决方案。

我在页面上有一个水平和垂直居中的div。我想在它上面放一个标题，而不是把主div去掉。

现在看起来是什么样子(两者作为一个整体居中)：

​

我希望它看起来是什么样子(黄色居中，蓝色标题在顶部)：

​

。。基本代码：

​

.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将容器居中。然后我将-50px添加到容器的top属性(头部高度的一半)，将容器向上移动50px，使内容div再次完全居中。这个解决方案应该可以在大多数较新的浏览器上工作，但是有一些“限制”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;
}

小提琴here。

我把内容做了600px宽，300px高，头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>

​