How to center a paragraph vertically in a div without the two divs overlapping?

user_10844328 0
Viewed 101

I can't figure out how to vertically center my name in this div. It's supposed to be the homepage on my website. The PgOne div is supposed to take up the height of the person's screen, so the name is supposed to be centered on the div (main), which is just below the navbar on PgOne.

The problem with the solutions that work is that when the window is really small vertically, it runs into the navbar.

I've tried these in CSS under .main and .name 

flex-grow: 1; 
display: flex; 
align-items: center;

^^ This works, but when the window is really small vertically, it runs into the navbar.

transform: translate(-50%, -50%);
position: absolute;

^^This works, but when the window is really small, they overlap.

padding-top: 10%; padding-bottom: 10%;

^^ Doesn't work.

display: table-cell; 
text-align: center; 
vertical-align: middle;

^^ Doesn't work.

Here is my code:

<div class=PgOne>

    <div class="navbar">
        <div>
            <p>HOME</p>
        </div><div>
            <p>ABOUT</p>
        </div><div>
            <p>EXPERIENCE</p>
        </div><div>
            <p>RESUME</p>
        </div><div>
            <p>CONTACT</p>
        </div>
    </div>

    <div class=main>
        <div class="name">
            <p>FirstName<br>LastName</p>
        </div>
    </div>

</div>


CSS

.navbar div {
    margin-top: 13px;
    margin-right: 1%;
    width: 18%;
    font-size: 20px;
    display: inline-block;
    position: relative;
}
.main {
    font-size: 25px;
    margin: 0 auto;
    text-align: center;

    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;

    /*flex-grow: 1; 
    display: flex; 
    align-items: center;*/
}
flexbox css html
2 Answers

The name is vertically centered within its container DIV. You just didn't set any height to the div (.main), so the DIV itself doesn't span the full page height, if that's what you are after. In my adaption of your code below I used calc for the height (expand it to see it), but the actual method depends on what you really want/need, i.e. on the full code of the page.

.navbar div {
  margin-top: 13px;
  margin-right: 1%;
  width: 18%;
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #555;
}

.main {
  display: flex;
  justify-content: center;
  height: calc(100vh - 100px);
  background: #eee;
  align-items: center;
  font-size: 75px;
  margin: 0 auto;
}
<div class=PgOne>

  <div class="navbar">
    <div>
      <p>HOME</p>
    </div>
    <div>
      <p>ABOUT</p>
    </div>
    <div>
      <p>EXPERIENCE</p>
    </div>
    <div>
      <p>RESUME</p>
    </div>
    <div>
      <p>CONTACT</p>
    </div>
  </div>

  <div class=main>
    <p>FirstName<br>LastName</p>
  </div>

</div>

user_56416690

After removing your absolute position transform, I made PgOne a flex parent and added a min-height: 100vh, the full viewport height. Next, I apply flex-grow: 1 to main, instructing it to take up as much vertical room as possible. I don't add anything to navbar, so it takes up whatever vertical space is remaining. To show it's taking up the correct space and vertical centering, I've added a background color on main.

http://jsfiddle.net/j8meqtvp/

.PgOne {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.navbar div {
    margin-top: 13px;
    margin-right: 1%;
    width: 18%;
    font-size: 20px;
    display: inline-block;
    position: relative;
}
.main {
    font-size: 25px;
    margin: 0 auto;
    text-align: center;
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    background-color: rgba(0, 0, 0, .1);
}
<div class=PgOne>

    <div class="navbar">
        <div>
            <p>HOME</p>
        </div><div>
            <p>ABOUT</p>
        </div><div>
            <p>EXPERIENCE</p>
        </div><div>
            <p>RESUME</p>
        </div><div>
            <p>CONTACT</p>
        </div>
    </div>

    <div class=main>
        <div class="name">
            <p>FirstName<br>LastName</p>
        </div>
    </div>

</div>

user_9492170
Related