How can I handle vertical alignment of `div`?

Question

I'm practicing publishing of this site How can I handle vertical alignment of div?

.header {
  background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) repeat scroll 0% 0%;
  height: 668px;
}

.header__nav {
  padding: 20px;
}

.header__nav__logo {
  float: left;
}

.header__nav__logo {
  padding: 6.5px 20px 6.5px 0;
  display: inline-block;
  margin-left: -20px;
}

.header__nav__logo img {
  width: 150px;
  height: 36px;
}

.header__nav__list {
  overflow: hidden;
  float: right;
  margin-right: -20px;
}

.header__nav__list li {
  float: left;
}

.header__nav__list li a {
  padding: 20px;
  display: inline-block;
  color: white;
}

.header__nav__list__button {
  background-color: #eb4336;
  border-radius: 3px;
}

.header__main {
  text-align: center;
  color: white;
  background-color: green;
}

.header__main__title {
  font-size: 50px;
}

.header__main__intro {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.header__main__button {
  background-color: #eb4336;
  border-radius: 5px;
  padding: 15px 50px;
  font-size: 20px;
  margin-top: 20px;
  display: inline-block;
}

.header__main__signin {
  margin-top: 10px;
}

.contents {
  background-color: yellow;
}

.footer {
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="default.css">
  <link rel="stylesheet" href="style.css">
  <title>Project Management Software</title>
</head>

<body>
  <header class="header">
    <div class="l__wrapper">
      <div class="header__nav clearfix">
        <a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
        <ul class="header__nav__list clearfix">
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Sign-in</a></li>
          <li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
        </ul>
      </div>
      <div class="header__main">
        <h1 class="header__main__title">
          Manage your projects, tasks & team to get things done faster!
        </h1>
        <p class="header__main__intro">
          A simple tool for project management, invoicing & time tracking.
        </p>
        <a class="header__main__button" href="#">TRY IT FREE NOW!</a>
        <p class="header__main__signin">
          Already using Pareto.pm? <span>Sign in</span>
        </p>
      </div>
    </div>
  </header>
  <section class="contents">
    Contents
  </section>
  <footer class="footer">
    Footer
  </footer>
</body>

</html>

I wanna div of green space to align vertically in the blue background except nav bar. How can I handle this?? I searched solutions and tried lots of things, but I failed. Many solutions suggest display: table-cell for vertical alignment, but it didn't work.

Try this simple trick: `position: relative` on parent div (blue background) and `position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);` in child (green background) — Ngorld, Jul 15 '19 at 03:22
@Ivan I solved this problem by ur suggestion now, but I have to fix height of parent to use ur solution. However, if height of parent cannot be fixed, how can I handle? — Privacy of Animal, Jul 15 '19 at 03:24
If you don't want to use CSS3, I think it's the best solution in this case — Ngorld, Jul 15 '19 at 03:31
For the cross compatibility, IE cannot be not considered in Korea and I'm practicing CSS 2.1 before entering the CSS3 — Privacy of Animal, Jul 15 '19 at 10:33

score 0 · Answer 1 · answered Jul 15 '19 at 03:54

.l__wrapper {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    align-items: center;
    grid-row-gap: 10px;
}

.header {
    background: rgba(0, 0, 0, 0) 
    linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) 
    repeat scroll 0% 0%;
    height: 668px;
}

.header__nav {
    padding: 20px;
}

.header__nav__logo {
    float: left;
}

.header__nav__logo {
    padding: 6.5px 20px 6.5px 0;
    display: inline-block;
    margin-left: -20px;
}

.header__nav__logo img {
    width: 150px;
    height: 36px;
}

.header__nav__list {
    overflow: hidden;
    float: right;
    margin-right: -20px;
}

.header__nav__list li {
  float: left;
  list-style-type: none;
}

.header__nav__list li a {
    padding: 20px;
    display: inline-block;
    color: white;
}

.header__nav__list__button {
    background-color: #eb4336;
    border-radius: 3px;
}

.header__main {
    text-align: center;
    color: white;
    background-color: green;
}

.header__main__title {
    font-size: 50px;
}

.header__main__intro {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.header__main__button {
    background-color: #eb4336;
    border-radius: 5px;
    padding: 15px 50px;
    font-size: 20px;
    margin-top: 20px;
    display: inline-block;
}

.header__main__signin {
    margin-top: 10px;
}

.contents {
    background-color: yellow;
}

.footer {
    background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="default.css">
    <link rel="stylesheet" href="style.css">
    <title>Project Management Software</title>
</head>
<body>
    <header class="header">
        <div class="l__wrapper">
            <div class="header__nav clearfix">
                <a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
                <ul class="header__nav__list clearfix">
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Sign-in</a></li>
                    <li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
                </ul>
            </div>
            <div class="header__main">
                <h1 class="header__main__title">
                    Manage your projects, tasks & team
                    to get things done faster!
                </h1>
                <p class="header__main__intro">
                    A simple tool for project management, invoicing & time tracking.
                </p>
                <a class="header__main__button" href="#">TRY IT FREE NOW!</a>
                <p class="header__main__signin">
                    Already using Pareto.pm? <span>Sign in</span>
                </p>
            </div>
        </div>
    </header>
    <section class="contents">
        Contents
    </section>
    <footer class="footer">
        Footer
    </footer>
</body>
</html>

Use display: grid to the parent class, and to align it vertically use align-content: center For reference go through this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

How can I handle vertical alignment of `div`?

1 Answers1