垂直居中的div的中心内容 [英] Center content of a div vertically

问题描述

这是我到目前为止：

http ：//jsfiddle.net/yisera/2aVpD/

有一个div需要在 .jumbotron-special 容器。

There's a div I need to center vertically inside the .jumbotron-special container.

我尝试对父元素使用 display：table; ，然后使用 table-cell 在子元素（具有H1和H2的那个），但到目前为止没有运气，我已经用尽了想法。我不想使用绝对定位，因为这需要响应，并且随着分辨率变小，布局错误。

I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.

任何想法如何将它集中到jumbotron父div？

Any ideas how can I center it to the jumbotron parent div?

推荐答案

您可以使用以下代码 div .jumbotron-special

You can use the following code the contents of the div .jumbotron-special

向类添加以下属性

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

工作代码： JSFIDDLE

更多 Flex Box

阅读更多关于Flex的资料此处

Read More on Flex here

这篇关于垂直居中的div的中心内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！