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

如何只用CSS做到完全居中

2016-08-22 16:19 316 查看

我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。

transform法

和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{width:200px;height:200px;background-color:#00FFFF;}
.child{
position:relative;top:50%;left:50%;
height:100px;width:100px;
background-color:red;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
注意:    <br>
好处:内容高度可变,并且代码量小<br>
缺点:不支持    IE8 需要些产商前缀 会和其他transform样式有冲突 某些情况下的边缘和字体渲染会有问题<br>
</body>
</html>

好处：

内容高度可变

代码量小

同时注意：

不支持IE8

需要写厂商前缀

会和其他transform样式有冲突

某些情况下的边缘和字体渲染会有问题

table-cell法

这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell方法</title>
<style type="text/css">
.Center-Container.is-Table{display:table;}
.is-Table .Table-Cell{display:table-cell;vertical-align:middle;}
.is-Table .Center-Block{width:50%;margin:0 auto;}
</style>
</head>
<body>
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
table-cell方法:<br/>
优点:内容高度可变 内容溢出则能自动撑开父元素高度 浏览器兼容性好<br/>
缺点:需要额外的 HTML 标签 <br/>
</div>
</div>
</div>
</body>
</html>

好处：

内容高度可变

内容溢出则能自动撑开父元素高度

浏览器兼容性好

同时注意：

需要额外的HTML标签

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

标签：

相关文章推荐

新的分享

章节导航