Question

我有一个100％宽度的大div，内部较小的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

垂直居中只适用于表格单元格。如果要水平对齐，则应使用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不起作用

3 个答案: