CSS 内容中间的框？

Question

我不想让右上角的按钮起作用，它只是一张图片。我需要帮助的是尝试使内容看起来像灰色背景，里面有框。

我制作了背景，但我需要在其中制作方框并学习如何在方框内键入 <p>。

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

.Site-content {
  flex: 1;
}
header {
    width: 100%;
    height: 90px;
    background-color: #212022;
    border-bottom:1px solid orange;
}
main {
  background-color: #181719;
}
footer {
  width: 100%;
  height: 167px;
  background-color : #212022;
  border-top:1px solid orange;
}
p{
  color: white
}
#logo{
 width: 520px;
 height: 80px;
 background: url('//i.imgur.com/PHXLLsn.png') no-repeat scroll center;
 margin-top:5px;
  left: 120px;
  float: left;
 position: absolute;
}
#steamlogin{
 width:154px;
 height: 23px;
 background: url('//i.imgur.com/qKairpt.png');
 margin-top: 32px;
 float: right;
 position: absolute;right: 130px
}

<body class="Site">
  <header>
    
    <div class="wrapper">
     <div id="logo"></div>
     <div id="steamlogin"></div>

  </header>
  <main class="Site-content">this is content</main>
  <footer>this is footer</footer>
</body>

Answer 1

您可以在具有固定宽度的元素（例如 width:980px、width:80%）上使用 margin-right:auto 和 margin-left:auto 来使该元素居中。（我使用了 margin 属性的 shorthand 版本，例如 margin: 50px auto;）

如果您想要居中包含 h1、h2、p 等文本的元素，您可以在这些元素上使用 text-align:center。

在下面的示例中，我创建了一个 div 元素，其中包含一个名为 "centered" 的 class，您也可以看到我是如何将 h2 元素居中的。希望对你有帮助。

http://jsfiddle.net/t5m4ew3r/4/

我还建议您查看一些 html/css 教程。您可以在互联网上轻松找到它们。这样你才能学得更好

CSS 内容中间的框？

CSS box in middle of content?

html

css

box