html中两个div垂直居中对齐 在div中垂直居中的两个元素

桃花长相依

如何对元素进行垂直、水平或两者的居中这里有两种在div中对div进行中心化的方法。一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产。在这两种情况下，居中的div的高度都可以是可变的、未定义的、未知的。中心点的高度并不重要。以下是两者的HTML：

DIV#1

DIV#2

CSS Flexbox方法#container{

display:flex;/*establishflexcontainer*/

flex-direction:column;/*stackflexitemsvertically*/

justify-content:center;/*centeritemsvertically,inthiscase*/

align-items:center;/*centeritemshorizontally,inthiscase*/

height:300px;

border:1pxsolidblack;}.box{

width:300px;

margin:5px;

text-align:center;}演示两个子元素(.box)垂直对齐flex-direction: column..对于水平对齐，请将flex-direction到row(或者简单地删除如下规则：flex-direction: row是默认设置)。项目将保持垂直和水平中心(演示).CSS表与定位方法body{

display:table;

position:absolute;

height:100%;

width:100%;}#container{

display:table-cell;

vertical-align:middle;}.box{

width:300px;

padding:5px;

margin:7pxauto;

text-align:center;}演示用哪种方法.。如果您不确定使用哪种方法，我会基于以下原因推荐Flexbox：极小的代码；非常有效的如前所述，对中很简单，而且很容易(参见另一个示例)等高柱既简单又容易。对齐FLEX元素的多个选项是有反应的与浮标和表格不同，它们提供有限的布局容量，因为它们从来就不是用来构建布局的，柔性盒是一种具有广泛选择的现代(CSS 3)技术。浏览器支持所有主流浏览器都支持Flexbox，除IE<10..最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀..有关添加前缀的快速方法，请使用自动复位器..更多细节见这个答案.