欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS水平垂直居中

程序员文章站 2022-05-26 22:29:27
...

水平居中

水平居中比较简单,这里只简单概述一下:

  • 对于行内元素来说(span、img、input等),直接text-align:center;即可搞定;
  • 对于块级元素,使用margin: 0 auto;也可以搞定;

还有其它一些方法,比如借助绝对定位等,不过更麻烦也不太推荐,所以不讲。

垂直居中

垂直居中主要有8种方法,本文只介绍7种,还有一种个人觉得不伦不类,懒得写了。

完整DEMO演示地址:http://demo.liuxianan.com/2016/11/26-vertical-align-center/

2.1. line-height法

通过设置line-height和height相同来达到文本元素垂直居中的效果。

示例:

.test {
	height: 200px;
	height: 200px;
}

优点:简洁,简单,好记,兼容性好;
缺点:只对文本元素生效,而且文本不能超过单行。

2.2. 绝对居中法

所谓绝对居中就是:

.parent {
	position: relative;
	width: 400px;
	height: 400px;
}
.children {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
}

优点:

  • 支持IE8+,兼容性良好.
  • 代码量少,标签结构简单.

缺点:

  • 高度必须定义;
  • 使用了绝对定位;

2.3. 负外边距法

将设置了绝对定位的子元素水平和垂直偏移50%;然后,在水平和垂直方向分别偏移负自身宽高的一半。

.parent{position:relative}
.children{position: absolute; left: 50%; top: 50%;}
.content{width: 100%; height: 150px;margin-left: -50%; margin-top: -75px;}

优点:

  • 兼容性好,IE6+,移动端更不用说

不足:

  • 子元素的宽高值需要确定,这对于高度自适应容器是个问题.
  • 最好将盒子设置box-sizing:border-box,因为偏移值是依据content+padding值来确定.

2.4. 负位移法(推荐)

将设置了绝对定位的子元素水平和垂直偏移50%;然后,通过CSS3 transform属性值将子元素偏移负自身宽高的一半。

.parent{position:relative}
.children{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}

优点:

  • 支持子容器高度自适应,无需显示设置宽高度;
  • 代码量少.

缺点:

  • 兼容性为IE8+,不过移动端兼容良好;
  • 需要添加浏览器私有前缀.

2.5. 表格法

通过设置display:table/table-cell相关属性,模拟表格布局。注意,将元素设置为display:table-cell;后并不是说这个元素就可以垂直居中了,而是它的子元素相对于它垂直居中,所以使用table-cell方式垂直居中的话还需要一个额外的标签。

<style type="text/css">
.parent {
	display:table;
	width: 700px;
	height: 400px;
	background: #3BB7FF;
	*position: relative; /*IE hake*/
}
.children {
	display:table-cell;
	vertical-align:middle;
	*position: absolute;
	*top:50%; /*IE hake*/
}
.content {
	width:300px;
	margin:0 auto;
	background: #00FD2A;
	*position: relative;
	*top:-50%; /*IE hake*/
}
</style>
<div class="parent">
	<div class="children">
		<div class="content">
			表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度表格法兼容性好,支持IE6+,支持动态高度。
		</div>
	</div>
</div>

注意.children不要设置了height:100%;,否则不兼容IE7。

优点:

  • 支持高度自适应,可适用于响应式环境.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好

缺点:

  • 需要额外标签。

2.6. 行内块法

通过增加一个空白元素(如伪元素),并将其高度设置为百分百,然后同时将空白元素和要居中的元素设置vertical-align: middle;即可实现垂直居中。

CSS水平垂直居中

.parent{}
.parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0}
.children{display:inline-block;vertical-align:middle}

优点:

  • 支持子元素高度自适应.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好,IE7+支持.

缺点:

  • 说不上来,但是个人不太喜欢这种方式;

2.7. flex

使用CSS3新添加的flexbox弹性布局可以非常容易的实现各种居中,如一个、多个子元素的水平/垂直居中、对齐、等高;

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

优点:

  • 不需要设置子元素的高度、宽度.
  • 适用于任意子元素水平垂直居中环境.
  • 代码量少.

缺点:

  • IE10+才兼容,移动端虽然都支持但是也存在部分兼容问题.
  • 需要添加浏览器私有前缀.