将div垂直居中在100％高度的另一个div内

我想将div居中放在具有100％高度的div内。基本上主要的div来到网站之前。我上传图片，以便更好地了解我想要做什么。将div垂直居中在100％高度的另一个div内

enter image description here

2014-08-31 Fede

可能重复[什么是最好的方式使用CSS垂直居中Div]（http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css） – 2014-08-31 09:23:11

另请参见：http ：//stackoverflow.com/questions/14113676/vertically-center-a-div-with-variable-height-within-a-div-that-is- 100-of-vi？rq = 1 – 2014-08-31 09:23:25

不幸的是，这需要你在容器上设置一个固定的高度（为什么，浏览器，为什么？）。 – 2014-08-31 09:29:04

如果使用CSS Flexbox是一个选项，你可以简单地实现，通过显示容器作为flex盒，并在中间（水平和垂直）排列内的div如下：

EXAMPLE HERE

#intro { 
    height: 100%; /* Or 100vh */ 

    display: flex; 
    align-items: center;  /* Align the inner div vertically */ 
    justify-content: center; /* Align the inner div horizontally */ 
}

在这个例子中，align-items和justify-content WO在垂直和水平方向上使内部div显示在#intro的中间。

通过添加供应商前缀，它也应该在IE 10上工作。（我在演示中使用Autoprefixer）。

但是为了支持旧的Web浏览器给这个方法一试（看看垂直对齐部分）的

Vertically align an image inside a div with responsive height

来源

2014-08-31 09:36:57

对，我有其他选择吗？这对IE 9有效？ – Fede 2014-08-31 09:38:50

@Fede请检查更新。 – 2014-08-31 09:43:52

将div垂直居中在100％高度的另一个div内

回答

相关问题