水平居中
水平居中比较简单,这里只简单概述一下:
- 对于行内元素来说(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;
即可实现垂直居中。
.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+才兼容,移动端虽然都支持但是也存在部分兼容问题.
- 需要添加浏览器私有前缀.