使用flexbox将文本居中，然后将按钮居中，其余为50％

Question

不敢相信我只是刚刚开始使用flexbox，看起来很酷但是我卡住了。我可能只是过度思考，但我理解flexbox应该让事情变得更容易。

我想显示一个带有标题，标语和联系人按钮的整页英雄形象，非常简单吧？

我附上了我想要的图像：

基本上，我希望将标题和标语文本放在中心，以供我使用：

justify-content:center;

然后我希望按钮位于剩下的50％的中心。我在侧面添加了绿色图像，以帮助显示我想要的位置。

我尝试使用：

justify-space-around;

但这似乎推动了标题文本。

这是我目前的代码：

* {
	margin:0;
	padding:0;
}

*, *:after, *:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.website-container {
  display: grid;
 	grid-gap: 0rem;
	grid-template-columns: repeat(1fr ) ;
}
.website-container > * {
	display: flex;
	height: 100vh;
}
h1 {
	font-weight: 600;
	font-size: 4vw;
}
.header {
  display:flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  flex-direction: column;
}
button {
	--padding: 1.1em;
	color: black;
	font: inherit;
	background: none;
	padding: 1rem calc(1rem * 2);
	border: 2px solid black;
	border-radius: 2px;
}
button:hover {
	color: black;
	background: red;
}

<div class="website-container">
<header class="header">
  <div class="container-fluid">
    <div class="space"></div>
    <div class="title">
      <h1>Heading text here</h1>
      <h2>Slogan text here</h2>
    </div>      
    <div class="calltoaction">
      <button type="submit" style="--primary-button">button</button>
    </div>
  </div>
</header>
</div>

如果我遗漏了任何内容，请告诉我，我会在帖子中添加更多内容。

Answer 1

现有标记最简单的方法是添加此规则

.calltoaction {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

并将position: relative添加到.website-container>*规则，以便calltoaction的绝对位置与之相关。

Fiddle demo

注意，您需要查看整页

中的代码段

Stack snippet

* {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.website-container {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(1fr);
}

.website-container>* {
  position: relative;
  display: flex;
  height: 100vh;
}

h1 {
  font-weight: 600;
  font-size: 4vw;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

button {
  --padding: 1.1em;
  color: black;
  font: inherit;
  background: none;
  padding: 1rem calc(1rem * 2);
  border: 2px solid black;
  border-radius: 2px;
}

.calltoaction {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button:hover {
  color: black;
  background: red;
}

<div class="website-container">
  <header class="header">
    <div class="container-fluid">
      <div class="space"></div>
      <div class="title">
        <h1>Heading text here</h1>
        <h2>Slogan text here</h2>
      </div>
      <div class="calltoaction">
        <button type="submit" style="--primary-button">button</button>
      </div>
    </div>
  </header>
</div>

我建议稍微简化代码，使用Flexbox属性并仍然得到相同的结果

这里的主要技巧是，使用伪作为 ghost 元素来平衡calltoaction，而不是标记中的额外元素，同时给它们flex-basis: 100%并且，由于flex-shrink默认为1，它们会平均收缩，并将title保持在中间位置。

然后让.website-container .calltoaction成为一个弹性容器，并将button与align-items: center;对齐

Fiddle demo

* {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.website-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

.website-container::before,
.website-container .calltoaction {
  content: ' ';
  flex-basis: 100%;
}

.website-container .calltoaction {
  display: flex;
  align-items: center;
}

h1 {
  font-weight: 600;
  font-size: 4vw;
}

button {
  --padding: 1.1em;
  color: black;
  font: inherit;
  background: none;
  padding: 1rem calc(1rem * 2);
  border: 2px solid black;
  border-radius: 2px;
}

button:hover {
  color: black;
  background: red;
}

<div class="website-container">
  <div class="title">
    <h1>Heading text here</h1>
    <h2>Slogan text here</h2>
  </div>
  <div class="calltoaction">
    <button type="submit" style="--primary-button">button</button>
  </div>
</div>