请教一个CSS的问题.高度不固定的块级元素,怎么垂直居中

发布网友

共2个回答

懂视网

使用css实现文本垂直居中，对于支持display: table的浏览器来说，是比较容易实现的，只需要对外层div设置为table，内层div设置为table-cell，并设置文本垂直居中即可。但对于IE6/7，并不支持display:table，只能改用定位的方式来处理。外层div给一个定位，中间层div相对外层绝对定位，top为50%，内层span相对定位，top为-50%，通过正负50%的定位，使内容垂直居中。

相关演示代码（不管怎么改变div1的高度，都可以保证内容垂直居中，内容不限行数）：

ie中垂直居中  IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell

热心网友

2种方法

1:支持CSS3的情况下，给父元素添加样式

父元素{diplay:flex;
justify-content:center;
align-items:center; }

2:不支持的话就

子元素{
margin:50% 50% ;
transform:translate(-50%,-50%)
}
父元素{
overflow:hidden;
或者 padding:
}

给父元素加overflow 或者padding 是为了防止外边距崩塌。

以上，望采纳

全部栏目

请教一个CSS的问题.高度不固定的块级元素,怎么垂直居中