您的位置：首页 > Web前端 > CSS

css 垂直水平居中总结

2014-10-04 11:40 309 查看

一、前言：

垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。

主要方式：

line-height

绝对定位

表格 display：table-cell

主要需求：

固定宽高

不固定宽高

主要兼容：

ie8+ 主流浏览器

ie6,7

二、行高

1. 利用行高与高度相同，实现单行文本居中

缺点：只能是单行文本

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2{
/*float: left;position: absolute; 子元素为浮动、绝对定位无效
此法>=ie8
*/}
</style>
<body>
<div class="div1">
<div class="div2">
fdsfsdffdf
fdsfdsfsdff
</div>
</div>
</body>
</html>

View Code
结果预览

五、总结

根据兼容性和自适应内容来考虑表格/行高法 + 相对定位法

如果固定宽高负margin法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航