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

时间 2019-11-12

标签聊聊 css 水平垂直居中那些栏目 CSS 繁體版

原文原文链接

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

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

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

优势： html

1.支持跨浏览器，包括IE8-IE10. web

2.无需其余特殊标记，CSS代码量少浏览器

3.支持百分比%属性值和min-/max-属性布局

4.只用这一个类可实现任何内容块居中测试

5.不管是否设置padding均可居中（在不使用box-sizing属性的前提下） flex

6.内容块能够被重绘。 spa

7.完美支持图片居中。设计

缺点： code

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起做用。

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试经过

二、负外边距(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上也表现良好的方法。

优势：

一、良好的跨浏览器特性，兼容IE6-IE7。

二、代码量少。

缺点：

一、不能自适应。不支持百分比尺寸和min-/max-属性设置。

二、内容可能溢出容器。

三、边距大小与padding,和是否认义box-sizing: border-box有关，计算须要根据不一样状况。

三、变形（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.某些情形下会出现文本或元素边界渲染模糊的现象

四、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.表现上可能会有一些问题