Use flexbox to centre text then centre the button with the remaining 50%

Question

Can't believe I'm only just starting to use flexbox, seems cool but I'm stuck. I could be just be over thinking things but I understand flexbox is supposed to make things easier.

I want to display a full page hero image with a header, slogan and contact button, pretty simple right?

I have attached an image of what I want:

Basically, I want to centre the heading and slogan text in the centre for this I use:

justify-content:center;

Then I want the button to be in the center of the remaining 50%. I have added the green image on the side to help show the positions I want.

I tried using:

justify-space-around;

but that seems to push the heading text up.

Here's my current code:

* {
 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>

If I've missed anything, please let me know and I'll add more to the post.

Asons · Accepted Answer · 2017-07-10T10:48:09.550

The simplest with the existing markup would be to just add this rule

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

and add position: relative to the .website-container>* rule so the calltoaction's absolute position relates to it.

Fiddle demo

Note, you need to look at the snippet in full page

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>

I would recommend to simplify the code a little, use Flexbox properties and still get the same result

The main trick here is, instead of an extra element in the markup, to use a pseudo as a ghost element to balance the calltoaction, give them both flex-basis: 100% and, as flex-shrink defaults to 1, they will shrink equally and keep the title in the middle.

Then one make the .website-container .calltoaction a flex container and center the button with 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>

Thanks for the answer. I had hoped there was a way of doing this using just flexbox but as yours is the only answer I guess there's not. I'll mark this as answered as it is correct at the end of the day, just not what I had hoped for. Thank you. — Dan, Jul 10 '17 at 10:31

Use flexbox to centre text then centre the button with the remaining 50%

1 Answers1