Question

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

这是我的代码（Customized Bootstrap只包含按钮，排版等内容。）

   

 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

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

Answer 1

如果您想要居中.wrapper.inner，请填写

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

<{1>}上的

，而不是.wrapper。

要将内封面置于页面中心，我将.wrapper.inner和.wrapper的高度设为100％。

＆＃13;

.container

＆＃13;

   

 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;
    }

＆＃13;

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

1 个答案: