使用 Flexbox 水平和垂直对齐事物答案

【问题标题】：Aligning things horizontally and vertically with Flexbox使用 Flexbox 水平和垂直对齐事物
【发布时间】：2015-03-15 23:10:11
【问题描述】：

我刚刚发现了“Flexbox”，它看起来确实可以让我的 (CSS) 生活更轻松。然而，我无法弄清楚如何同时水平和垂直对齐某些东西，这对于 Flexbox 来说应该很容易。我已经尝试过这里列出的属性：http://css-tricks.com/snippets/css/a-guide-to-flexbox/，但它们似乎都不起作用。我可能做错了什么。谁能帮帮我？

这是我的代码（定制的引导程序仅包含按钮、排版等内容）

   

 body,
    html {
      height: 100%;
      min-height: 100%;
      width: 100%;
    }
    body {
      color: #fff;
      font-family: 'Lato', sans-serif;
      text-align: center;
      background: #5e129f;
      /* Old browsers */
    }
    .wrapper {
      display: flex;
    }
    .wrapper.inner {
      justify-content: center;
      align-items: center;
    }

   

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

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Flexbox test</title>
      <!-- Flexbox-->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/flexbox.css" type="text/css" />
      <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>

    <body>
      <div class="container">
        <div class="wrapper">
          <div class="wrapper inner">
            <div class="row">
              <div class="col-xs-12">
                <h1>Hello, world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae viverra nunc.
                  <br>Phasellus auctor enim sed tortor ultrices commodo.</p>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-3">
                <button type="button" class="btn btn-default">Learn more</button>
              </div>
              <div class="col-xs-3">
                <button type="button" class="btn btn-default">Donate</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>

    </html>

我希望 .wrapper 水平和垂直对齐，这样我可以使最终产品看起来像这样（不要注意样式差异）：

http://prntscr.com/5tj5sl

提前致谢！希望有人可以帮助我:)

【问题讨论】：

标签： html css alignment flexbox

【解决方案1】：

如果你想居中.wrapper.inner，放

align-items: center;
justify-content: center;

在.wrapper，而不是.wrapper.inner。

为了使内包装在页面上居中，我将 .wrapper 和 .container 的高度设为 100%。

   

 body,
    html {
      height: 100%;
      min-height: 100%;
      width: 100%;
    }
    body {
      color: #fff;
      font-family: 'Lato', sans-serif;
      text-align: center;
      background: #5e129f;
      /* Old browsers */
    }
    .container {
        height: 100%;
    }
    .wrapper {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

   

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

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Flexbox test</title>
      <!-- Flexbox-->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/flexbox.css" type="text/css" />
      <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>

    <body>
      <div class="container">
        <div class="wrapper">
          <div class="wrapper inner">
            <div class="row">
              <div class="col-xs-12">
                <h1>Hello, world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae viverra nunc.
                  <br>Phasellus auctor enim sed tortor ultrices commodo.</p>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-3">
                <button type="button" class="btn btn-default">Learn more</button>
              </div>
              <div class="col-xs-3">
                <button type="button" class="btn btn-default">Donate</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>

    </html>

【讨论】：