如何处理“div”的垂直对齐？ [复制]答案

【问题标题】：How can I handle vertical alignment of `div`? [duplicate]如何处理“div”的垂直对齐？ [复制]
【发布时间】：2019-07-15 17:08:42
【问题描述】：

我正在练习发布this site 如何处理div 的垂直对齐？

JSFIDDLE

.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>

我想div 的绿色空间在蓝色背景中垂直对齐，导航栏除外。我该如何处理？我搜索了解决方案并尝试了很多东西，但我失败了。许多解决方案建议使用display: table-cell 进行垂直对齐，但它不起作用。

【问题讨论】：

试试这个简单的Flexbox 和align-items: center
@Ivan 我知道Flexbox，但我不想使用 CSS3
试试这个简单的技巧：position: relative 在父 div（蓝色背景）和position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 在子 div（绿色背景）
如果你不想使用CSS3，我认为这是这种情况下最好的解决方案
只是好奇你为什么不使用 CSS3 ？

标签： html css vertical-alignment

【解决方案1】：

.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>

使用display: grid 到父类，垂直对齐使用align-content: center 参考这个链接https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

【讨论】：