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：极小的代码；非常有效的

如前所述，对中很简单，而且很容易(

是有反应的

与浮标和表格不同，它们提供有限的布局容量，因为它们从来就不是用来构建布局的，柔性盒是一种具有广泛选择的现代(CSS 3)技术。

浏览器支持

所有主流浏览器都支持Flexbox，除IE<10..最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀..有关添加前缀的快速方法，请使用自动复位器..更多细节见这个答案.