如何将标题放置在居中div的顶部？（html/css）_Html_Css_Header_Center

如何将标题放置在居中div的顶部？（html/css）

html css

如何将标题放置在居中div的顶部？（html/css）,html,css,header,center,Html,Css,Header,Center,我在编码方面是新手，我已经设法弄明白了一些事情，但这件事深深地困扰着我，因为我似乎找不到解决办法我在页面上有一个水平和垂直居中的div。我想在它上面放置一个标题，而不使主div偏心现在看起来如何（两者都作为一个整体居中）：我希望它看起来如何（黄色居中，蓝色标题在顶部）：。。基本代码： .outer{ 显示：表格；位置：绝对位置；身高：100%；宽度：100%； } .中{ 显示：表格单元格；垂直对齐：中间对齐； } .标题{ 宽度：1000px；高度：100px；背景

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

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

现在看起来如何（两者都作为一个整体居中）：

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

。。基本代码：

.outer{
显示：表格；
位置：绝对位置；
身高：100%；
宽度：100%；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
}
.标题{
宽度：1000px；
高度：100px；
背景颜色：蓝色；
左边距：自动；
右边距：自动；
}
梅因先生{
宽度：1000px；
高度：500px；
背景颜色：黄色；
左边距：自动；
右边距：自动；
}

这很可能不是最好的答案，但这只是一个开始。实际上，我使用。然后，我将-50px添加到容器的top属性（标题高度的一半），将容器向上移动50px，使content div再次完全居中。这个解决方案应该适用于大多数较新的浏览器，但有一些“限制”

HTML

小提琴

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


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

/**Web浏览器首先加载标记中的内容
*/
.外部{
显示：表格；
位置：绝对位置；
身高：100%；
宽度：100%；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
}
/*可以使用“边距：0自动；”将此对象居中。
*不需要左右边缘居中。
*
*另外，将位置设置为相对位置，然后尝试添加标题对象
*/
.标题{
宽度：1000px；
高度：100px；
背景颜色：蓝色；
保证金：0自动；
位置：相对位置；
}
/*您不需要左右两侧的边距都为0
*如果你有100%的宽度
*/
梅因先生{
宽度：100%；
高度：500px；
背景颜色：黄色；
保证金：0；
}

请给我一些代码。。。您尝试过什么？请至少提供一个标记和CSS的基本示例。不过，快速拍摄：给中间的div一个页眉高度的负边距（如果是固定高度），或者将页眉设置为

display:fixed

。但是，这取决于具体情况，实现这一点的最佳方法是什么，所以请提供一些代码。您好！对不起，我无意中发布了没有代码的帖子。刚刚更新了一个基本的例子和2张图片。我希望标题是在主div的顶部，并保持主div在相同的位置，因为它将没有标题。。。（主div有一个图像，所以我想成为页面上唯一居中的东西。页眉上会有一个徽标，所以我希望它位于上方，而不是与主div一起位于居中容器中。）您的页眉是否有已知的尺寸（在您的示例中为1000px*100px）？而居中的div，是否应该始终为1000px*500px？当窗口小于1000px*600px时，行为应该是什么？因为我是这方面的新手，所以我认为我不应该马上开始考虑响应性设计。我应该从一开始就这样做吗？使用百分比或根据窗口大小定义不同的维度？@Teresa这确实取决于您想要构建什么，但对于现在的大多数项目，我认为响应几乎是必须的。但是，如果你想慢慢来，只是玩自大，你可以尝试采取一步一步。我会更新我的答案，包括你想要做的工作演示，但我不得不说这很可能不是最好的解决方案。谢谢你：-）这肯定是一个开始。

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;
}

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