文档章节

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

ITer在路上
 ITer在路上
发布于 2015/10/10 09:28
字数 846
阅读 89
收藏 2

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

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

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

优点:

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

© 著作权归作者所有

ITer在路上
粉丝 1
博文 40
码字总数 13808
作品 0
深圳
程序员
私信 提问
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
0
0
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
22
0
《css 揭秘》 之垂直居中的实现

最近看了 Lea Verou 的 《css揭秘》一书,让我对自己的 css学习产生了深深的怀疑。这本书真是太棒了,里面涉及到很多优雅又有趣的效果实现,真的是非常棒。如果你有时间,十分建议你去看看。...

IrisHuang
04/23
10
0
如何让DIV水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用...

ForingY
2016/06/26
38
0
「干货」CSS 不定宽高的垂直水平居中(最全 9 种)

前言 垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局...

Micherwa
09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cpu load过高问题排查

load average的概念 top命令中load average显示的是最近1分钟、5分钟和15分钟的系统平均负载。 系统平均负载被定义为在特定时间间隔内运行队列中(在CPU上运行或者等待运行多少进程)的平均进程...

mskk
30分钟前
5
0
用spring boot 实现websocket

import java.io.IOException;import javax.websocket.OnClose;import javax.websocket.OnError;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import java......

jingshishengxu
40分钟前
4
0
shell介绍,命令历史,命令补全和别名,通配符,输入输出重定向,管道符和作业控制

shell介绍 可以使用 yum list |grep zsh 或者 yum list |grep ksh 这样可以搜索 zsh 和 ksh ,有需要的话可以安装 总之,默认使用的就是 .bash shell 命令历史 输入过的命令会被保存在一个文...

doomcat
57分钟前
7
0
1995年的资深工程师,和你谈谈如何进阶

1995年的资深工程师,和你谈谈如何进阶 自我介绍 网络ID:杭城小刘,城市:顾名思义,人在杭州。1995年出生,本科毕业,现在是一名 iOS 资深工程师,年薪 35w。兴趣爱好广泛:乒乓球、美食、...

杭城小刘
今天
10
0
Kafka 面试题

1.Kafka中的ISR、AR代表什么? ISR:与leader保持同步的follower集合 AR:分区的所有副本 2.Kafka中的HW、LEO分别代表什么? LEO:每个副本的最后条消息的offset HW:一个分区中所有副本最小...

GrayWorld
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部