How do I "vertically center" two flex items?

Question

Here is the link to my project.

I want both of them to be "centered" so to speak. But yes, I know they can both take up 1 position. So I think if there is a way to draw a (invisible) horizontal line that is vertically centered. Then, I can just place one flex item right on top of this line, and the other right below it.

But I think there is a better way to do this that can be used to centered more than 2 flex items.

body{
  background:#4A6556;
  
}


body>div>hello,hey{
  background: #CCC;
  border-radius: 7px;
  margin: 5px;
  padding: 20px;
}

body>div{
  display: flex;
  flex: row wrap;
  flex-direction: column;
}

body>div>hey{
  order:2;
  
  font-family: 'Lato', sans-serif;
  color:#212121;
  
}
body>div>hello{
  order:1;
  
  font-family: 'Kumar One', cursive;
  color: #938653;
}

hello,
hey{
  text-align: center;
}

<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">

<body>
  <div>
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
   </div>
</body>

I want the height to the whole page of the screen. whatever that is. — most venerable sir, Jan 06 '17 at 19:27
@Santi Those elements are valid and called [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) — Asons, Jan 06 '17 at 20:34
@LGSon Is there a default behavior run on custom elements that have not been defined in JavaScript? I mean, do they validate without a definition? — tao, Jan 06 '17 at 20:50
@AndreiGheorghiu I don't recall arguing, I believe I asked you "Why use custom tags if you don't need to?" expecting an actual answer, it was not rhetorical. You seem to be knowledgeable on the topic, so I figured you could provide some insight. Don't get so defensive, it was a conversation, not an argument. LGSon - Interesting, thanks. I'll have to do some research on them! — Tyler Roper, Jan 06 '17 at 20:50
@AndreiGheorghiu Just follow the link, it will give you a better explanation than I can — Asons, Jan 06 '17 at 20:56
@Santi The **need to** is clearly something that cannot be measured, since it's subjective. I'd use custom elements if I wanted to make sure browsers **never** applied any default styling to my elements, for example. I'd also use them if they would add meaning to my markup, like in `Name heredate heredate here......more events...`, especially if I would be dealing with repetitive elements. This actually has the potential to add SEO, imho. — tao, Jan 06 '17 at 20:57
@LGSon I have, thank you. I also found [this](http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5). — tao, Jan 06 '17 at 20:58
Apparently, a custom element validates if it has a `-` (dash) in its name. — tao, Jan 06 '17 at 21:05
@Santi You're quite welcome. Sorry if I seemed harsh earlier. No idea why but, in general, my "comments" sound friendlier than they read. Could also be that I'm not native in English and I might be slightly shifting meaning (according to my native language) of certain terms without being aware of it. — tao, Jan 06 '17 at 21:51
And, by the way, I wouldn't know that either if it wasn't for our *friendly* chat and for @LGSon's comment. So **thank you** both :). — tao, Jan 06 '17 at 21:54
@AndreiGheorghiu Not a problem, wasn't my intention to sound argumentative and so I apologize as well, glad to have learned something new! — Tyler Roper, Jan 06 '17 at 22:14

tao · Answer 1 · 2017-01-06T20:10:11.813

It's not entirely clear from your question if you want the two items displayed side-by-side or one-on-top-of-the-other.

A. side by side

.va-twins {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.va-twins > * {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0; padding: 0; // SO reset, you don't need this.
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

If you need it, here's the fully prefixed code (for close to full browser compatibility 97.38% at the time of this posting)

.va-twins {
  min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  
}
.va-twins > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

B. one on top of the other

.va-twins {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.va-twins > * {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0; padding: 0; // SO reset, you don't need this.
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

Fully prefixed:

.va-twins {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.va-twins > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

You could use @media queries to switch between A. and B. on different screen sizes.

What is the meaning of > *? You have display, justify-content, and align-items repeated twice. Why? — most venerable sir, Jan 06 '17 at 19:38
This is why: https://www.w3.org/TR/CSS21/selector.html%23id-selectors `>` means "direct child of". So `> *` applies to any immediate children of whatever the selector before `>` applies to. It's basic `CSS`. — tao, Jan 06 '17 at 19:40
@user132522 I re-read your question and I'm not sure you want them displayed side by side or one on top of the other. I edited the answer to cover the other option too. — tao, Jan 06 '17 at 20:43
The site says >* targets the child of the grandchild of something. Can you still briefs explains the components? Thank you — most venerable sir, Jan 06 '17 at 21:34
@user132522 I linked the official documentation because that's where I usually go when in doubt. Until you grasp the basics, you might find [this resource](http://www.w3schools.com/cssref/css_selectors.asp) more helpful. But remember the official one is w3.org. That is the source. — tao, Jan 06 '17 at 21:37
[Here is](https://www.w3.org/TR/CSS21/selector.html#child-selectors) child selectors definition in w3.org. Please note in the official documentation `child` means `direct descendant` and is never used for a distant descendant, like a grandchild. That's generally referred to as `descendant` in w3.org — tao, Jan 06 '17 at 21:45

How do I "vertically center" two flex items?

1 Answers1