如何对元素进行垂直、水平或两者的居中
这里有两种在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,需要供应商前缀..有关添加前缀的快速方法,请使用自动复位器..更多细节见这个答案.