居中

栏目: CSS · 发布时间: 7年前

内容简介：居中

水平居中

1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
2) 若是块级元素, 该元素设置 margin:0 auto即可.
3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

.parent{
  	width: -moz-fit-content;
	width: -webkit-fit-content;
	width:fit-content;
	margin:0 auto;
}

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.
4) 使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:

.son{
	display: flex;
	justify-content: center;
}

5) 使用flex 2009年版本, 父元素display: box;box-pack: center;如下设置:

.parent {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	display: -o-box;
  	-o-box-orient: horizontal;
  	-o-box-pack: center;
  	display: -ms-box;
  	-ms-box-orient: horizontal;
  	-ms-box-pack: center;
  	display: box;
  	box-orient: horizontal;
  	box-pack: center;
}

6) 使用CSS3中新增的transform属性, 子元素设置如下:

.son{
	position:absolute;
  	left:50%;
  	transform:translate(-50%,0);
}

7) 使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

.son{
	position:absolute;
	width:固定;
    left:50%;
    margin-left:-0.5宽度;
}

8) 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{
	position:absolute;
	width:固定;
	left:0;
	right:0;
	margin:0 auto;
}

垂直居中

单行文本
1) 若元素是单行文本, 则可设置 line-height 等于父元素高度

行内块级元素

2) 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{
	display:inline-block;
	vertical-align:middle;
}
.parent::after{
	content:'';
	height:100%;
}

元素高度不定

3) 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

优点

元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.

缺点

IE6~7, 甚至IE8 beta中无效.

4) 可用 Flex 2012版, 这是CSS布局未来的趋势. Flexbox是CSS3新增属性, 设计初衷是为了解决像垂直居中这样的常见布局问题.

父元素做如下设置即可保证子元素垂直居中:

.parent {
  display: flex;
  align-items: center;
}

优点

内容块的宽高任意, 优雅的溢出.
可用于更复杂高级的布局技术中.

缺点

IE8/IE9不支持
需要浏览器厂商前缀
渲染上可能会有一些问题

5) 使用flex 2009版.

.parent {
  	display: box;
  	box-orient: vertical;
  	box-pack: center;
}

优点

实现简单, 扩展性强

缺点

兼容性差, 不支持IE

6) 可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{
	position:absolute;
	top:50%;
	-webkit-transform: translate(-50%,-50%);  
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

优点

代码量少

缺点

IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

元素高度固定

7) 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{
	position:absolute;
	top:50%;
	height:固定;
	margin-top:-0.5高度;
}

优点

适用于所有浏览器.

缺点

父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.

8) 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{
	position:absolute;
	height:固定;
	top:0;
	bottom:0;
	margin:auto 0;
}

优点

简单

缺点

没有足够空间时, 子元素会被截断, 但不会有滚动条.

总结

水平居中较为简单, 共提供了8种方法, 一般情况下 text-align:center,marin:0 auto; 足矣

① text-align:center;
② margin:0 auto;
③ width:fit-content;
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法

垂直居中, 共提供了8种方法.

① 单行文本, line-height
② 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现
③ vertical-align
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法

我们发现, flex, 盒模型, transform, 绝对定位, 这几种方法同时适用于水平居中和垂直居中.

在页面中画一个回字，兼容性最好的做法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0px;margin: 0px;}
		html,body{height: 100%;}
		/*垂直水平居中*/
		.div1{width: 400px;height: 400px;position: absolute;border:5px solid #666;top: 50%;left: 50%;margin: -200px;}
		.div2{width: 160px;height: 140px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;border:5px solid #666;margin: auto;}
	</style>
</head>
<body>
<div class="div1">
    <div class="div2">
    
    </div>
</div>
</body>
</html>

以上所述就是小编给大家介绍的《居中》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

High Performance JavaScript

Nicholas C. Zakas / O'Reilly Media / 2010-4-2 / USD 34.99

If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all of those lines of JavaScript code can slow down your ......一起来看看《High Performance JavaScript》这本书的介绍吧!

码农工具

居中

水平居中

垂直居中

High Performance JavaScript

RGB转16进制工具

XML 在线格式化

UNIX 时间戳转换