html - 保持包装容器一定比例的主体

Question

我很难让我的内容在我的个人网站上以一定的宽度居中。我尝试了很多方法，例如将 body 设置为固定宽度，并将包装器容器设置为固定宽度的百分比。我在此处附上了我的网站图片，并突出显示了我希望我的内容包含在图片中的位置

.

我希望我的网站内容集中在该突出显示的区域中，同时保持背景为屏幕的全尺寸。

我知道这对很多人来说可能是一个简单的问题，但我花了一整天的时间寻找并尝试不同的方法来解决这个问题，但都无济于事。

body {
  background-color: #F0f0f0;
  text-align: center;
  margin-right: 0px;
  margin-left: 0px;
}

.wrapper {
  text-align: center;
}

.topSection {
  height: 300px;
  border: solid 5px;
}

.mainAbout {
  padding-left: 50px;
  padding-right: 50px;
  vertical-align: middle;
}

.mainAbout h1 {
  font-size: 60px;
  font-family: arvo, sans-serif;
  margin-bottom: 5px;
}

#leftBrace {
  vertical-align: middle;
}

#rightBrace {
  vertical-align: middle;
}

.projects {
  height: 864px;
  border: solid 5px;
  margin-top: 2px;
  background: #0F1217;
}

.projects h2 {
  color: #e6e6e6;
  font-family: arvo, sans-serif;
  font-size: 50px;
}

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">

<div class="wrapper">
  <!---- Wrapper Starts Here --->
  <div class="topSection" style="display:block" ;>
    <!---- Name Section Starts Here --->

    <div id="leftBrace" style="display: inline-block" ;>
      <img src="leftbrace.png">
    </div>

    <div class="mainAbout" style="display: inline-block" ;>
      <!--- Main Name and About me Section ---->

      <h1> Benjamin Yan </h1>
      <p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>

    </div>
    <!--- End mainAbout --->

    <div id="rightBrace" style="display: inline-block" ;>
      <img src="rightbrace.png">
    </div>

  </div>
  <!--- Wrapper Ends Here --->

  <div class="projects">
    <h2> Projects </h2>
  </div>

  <div class="contact">
  </div>

</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>

Answer 1

您可以使用伪选择器 :before 和 :after 为 curly-braces 设置样式，而不是使用 background，因此它的工作方式类似于字体样式，你可以使用 transform:translate 来居中你的介绍文本容器，检查下面的代码。

#box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #ccc;
}

#box > .cnt {
  width:50%;
  text-align: center;
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%);
}

#box:before {
  content:"{";
  font-size: 250px;
  position: absolute;
  top: 0;
  left:10%;
}

#box:after {
  content: "}";
  font-size: 250px;
  position: absolute;
  top: 0;
  right:10%;
}

<div id="box">
  <div class="cnt">
    <h1> Benjamin Yan </h1>
      <p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
  </div>
</div>