使用 flexbox 居中文本定位

Question

尝试使用 flexbox 进行简单的网站重建。这是最终目标（对于这一步）：

很简单。但我正在努力对齐文本。我能够让标题居中就好了。这主要是我无法居中的段落。有没有办法将该段落垂直和水平居中到其外部容器？刚接触 flexbox，希望有任何提示！这是我的 codepen 和相关代码的链接：https://codepen.io/gkunthara/pen/qjympg

HTML

 <div class = "content-container">
<h1 class = "main-header"> Connect with Subscribers Effortlessly </h1>
 <p class = "sub-header"> Email Marketing Platform for Bloggers & 
Authors. </p>
 </div>

CSS

 .content-container  .main-header{

  box-sizing: border-box;
  font-weight: 600;
  font-size: 45px;
  height:75px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgb(51, 51, 51);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-style: solid;

}

.content-container .sub-header {
  border-style: solid;
  display: flex;
  height: 25px;
  margin-top: 150px;
}

Answer 1

你只需要做两件事。

1.添加

flex-direction: column;
align-items: center;

到您的.content-container 班级。

2. 从.content-container .sub-header 中删除margin-top: 150px，应该就是它了。

* {
  box-sizing: border-box;
}

.content-container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  border-style: solid;
  margin-top: 15px;
  flex-direction: column;
  align-items: center;
}

.content-container .main-header {
  box-sizing: border-box;
  font-weight: 600;
  font-size: 30px;
  height: 75px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgb(51, 51, 51);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-style: solid;
}

.content-container .sub-header {
  border-style: solid;
  height: 25px;
}

<div class="content-container">
  <h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
  <p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>

Here is the fiddle to play with.

希望这会有所帮助。

Answer 2

如果您删除 .content-container .sub-header 规则中的 margin-top 并将 flex-direction: column; align-items: center; 添加到您的 .content-container 中，则文本将正确居中

Updated codepen

堆栈sn-p

* {
  box-sizing: border-box;
}

.header-container {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 75px;
}

.header-container .logo {
  width: 250px;
}

.header-container .logo .sb {
  max-width: 100%;
}

.header-container .nav-bar-container {
  display: flex;
}

.nav-link {
  text-decoration: none;
  color: #4B4B4B;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 15px;
}

.content-container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-style: solid;
  margin-top: 15px;
}

.content-container .main-header {
  box-sizing: border-box;
  font-weight: 600;
  font-size: 45px;
  height: 75px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgb(51, 51, 51);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-style: solid;
}

.content-container .sub-header {
  border-style: solid;
  display: flex;
  height: 25px;
}


/* Resize window to see its effect */

@media( max-width: 700px) {
  .header-container {
    flex-direction: column;
  }
}

<div class="header-container">
  <a class="logo"> <img class="sb" src="logo.png" alt="logo"> </a>
  <nav class="nav-bar-container">
    <a class="nav-link" href="#"> Tour </a>
    <a class="nav-link" href="#"> Pricing </a>
    <a class="nav-link" href="#"> Medium </a>
    <a class="nav-link" href="#"> Sign Up </a>
    <a class="nav-link" href="#"> Login </a>
  </nav>
</div>

<div class="content-container">
  <h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
  <p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>

---

如果您打算将.content-container .sub-header 居中而不考虑.content-container .main-header，则需要将.content-container .main-header 定位到绝对位置

有了这个，它可以与我在第一个解决方案中添加的flex-direction: column; 一起使用或不使用。

但请注意，在不太宽的屏幕上，您需要同时调整两者，否则它们会重叠

Updated codepen

将这些属性添加到您的.content-container .main-header

position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;