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

聊聊css水平垂直居中那些事

2015-10-10 09:28 513 查看

1、绝对定位居中(Absolute Centering)技术

我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS：

[b].demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}[/b]

优点： 1.支持跨浏览器，包括IE8-IE10. 2.无需其他特殊标记，CSS代码量少 3.支持百分比%属性值和min-/max-属性 4.只用这一个类可实现任何内容块居中 5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下） 6.内容块可以被重绘。 7.完美支持图片居中。缺点： 1.必须声明高度（查看可变高度Variable Height）。 2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。 3.在Windows Phone设备上不起作用。浏览器兼容性： Chrome,Firefox, Safari, Mobile Safari, IE8-10. 绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过

2、负外边距(Negative Margins)

这或许是当前最流行的使用方法。如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：
外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;

.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}

测试表明，这是唯一在IE6-IE7上也表现良好的方法。
优点：
1、良好的跨浏览器特性，兼容IE6-IE7。
2、代码量少。
缺点：
1、不能自适应。不支持百分比尺寸和min-/max-属性设置。
2、内容可能溢出容器。
3、边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

3、变形（Transforms）

这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀。

.demo{background: #f00;width: 400px;position: absolute;margin: auto;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,50%);transform: translate(-50%,-50%);}

优点：
1.内容可变高度
2.代码量少
缺点：
1.IE8不支持
2.属性需要写浏览器厂商前缀
3.可能干扰其他transform效果
4.某些情形下会出现文本或元素边界渲染模糊的现象

4、Flexbox

这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X轴翻转</title>
<style type="text/css">
*{
margin: 0;padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<img src="images/pro01.png" />
</body>
</html>

优点：

1.内容块的宽高任意，优雅的溢出。
2.可用于更复杂高级的布局技术中。
缺点：
1.IE8/IE9不支持。
2.Body需要特定的容器和CSS样式。
3.运行于现代浏览器上的代码需要浏览器厂商前缀。
4.表现上可能会有一些问题

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

标签：

相关文章推荐

新的分享

章节导航