垂直对齐 CSS 无效

Question

我有一个大的 div，宽度为 100%，里面有一个较小的 div，宽度为 1086px；

我正在尝试让小 div 水平居中，内容垂直居中。

我哪里错了？

<html>
    <head>
        <title>test</title>
        <style>
            body {
                margin:0; padding:0;
            }

            .wrapper {
                width:100%;
                height:446px;
                background:red;
                margin:0;
                padding:0;
            }

            .inner {
                width:1086px;
                height: 446px;
                background: yellow;
                margin: 0px auto;
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="inner">asd</div>
        </div>
    </body>
</html>

Answer 1

vertical-centered 仅适用于 table-cells。如果你想水平对齐，你应该使用display:table-cell；试试这段代码； http://codepen.io/ogzhncrt/pen/rVRONG

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 446px;
  background: red;
  margin: 0;
  padding: 0;
}

.inner {
  display: table;
  width: 1086px;
  height: 446px;
  background: yellow;
  margin: 0px auto;
}

.center {
  vertical-align: middle;
  display: table-cell;
}

Answer 2

.inner {
  margin: auto;
  width: 1086px;
  height: 100%;
  background: yellow;
  /* margin: 0px auto;
  vertical-align:middle; */

  /* If you can use flexbox
  display: flex;
  justify-content: center;
  align-items: center;
  */
}

/* If you can't */

.inner > p {
  margin: 0;
  height: 50%;
  transform: translateY(100%);

  text-align: center;
}

Answer 3

你可以像这样使用弹性框：

body {
    margin:0;
    padding:0;
}
.wrapper {
    width:100%;
    height:446px;
    background:red;
    margin:0;
    padding:0;
}
.inner {
    width:1086px;
    height: 446px;
    background: yellow;
    margin: 0px auto;
    vertical-align:middle;     
    display: flex;          /*added*/
    align-items: center;    /*added*/
}

<div class="wrapper">
    <div class="inner">
        <div>here the content</div>
    </div>
</div>

查看整页中的代码段。

Check this out for full information

垂直对齐 CSS 无效

Vertical align CSS not working

css

alignment