如何将这个div居中放置在一个区域中？

Question

问题背景：

我正在使用Bootstrap为Web应用程序创建一个页面。

的问题：

我有两个Sections的布局中。我希望Sections内的信息divs在水平和垂直方向均居中。

目前我无法获得div中心。

我曾尝试将以下内容应用于两个部分内的div，但对布局没有影响。

.centerSectionDivs{ 
    float: none; 
    margin: 0 auto; 
} 

这里是我的布局的代码笔：

http://codepen.io/daveharris/pen/rxvLby

这说明问题。任何帮助获得完美中心部分的信息将非常感激。

Answer 1

你可以使用柔性：

#section1 { 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
} 

http://codepen.io/gc-nomade/full/xZzRav/

Answer 2

无处在您的HTML是一类使用名为.centerSectionDivs。

所以没有什么会改变，因为它不存在。

所以这个：

.centerSectionDivs{ 
     margin:0 auto; 
    } 

心不是必要的。

你可能要考虑其他类或ID的找出哪一个关联到什么