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

桃花长相依

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

   

DIV #1

DIV #2

CSS Flexbox方法#container {

    display: flex;              /* establish flex container */

    flex-direction: column;     /* stack flex items vertically */

    justify-content: center;    /* center items vertically, in this case */

    align-items: center;        /* center items horizontally, in this case */

    height: 300px;

    border: 1px solid black;}.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: 7px auto;   

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