CSS 居中方法集锦
记录收集纯CSS层面实现的水平、垂直居中方法可用于块级、行内快、内联元素以及文字图片等。css
- 水平或垂直居中
1.1 text-align
1.2 margin
1.3 line-height
1.4 padding- 水平与垂直同时居中
2.1 挡板方式实现的水平垂直居中
2.2 vertical-align
2.3 模拟单元格特性
2.4 position + margin:负值
2.5 position + margin:auto
2.6 position + translate
2.7 position + calc
2.8 相对于viewport进行水平垂直居中
2.9 css3 - flex- 图片相关的水平垂直居中
3.1 背景图方式
3.2 CSS 表达式
3.3 button 方式
3.4 网易NEC - 适合图片的方式
1. 水平或垂直居中
1.1 text-align
对于要求不高，而且内容是文本元素或是行内块元素(inline-block)，能够很容易的经过text-align:center进行水平居中。
示例：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
background:#eee;
text-align: center;
}
span{
display:inline-block;
background:#aaa;
width: 200px;
}
</style>
</head>
<body>
<div>
使用text-align:center进行水平居中<br/>
<span>inline-block</span>
</div>
</body>
</html>
1.2 margin
对于内容是块级元素,经过 margin:0px auto 能够很容易的进行水平居中。
示例：css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
background:#eee;
text-align: center;
}
p{
background:#aaa;
width:500px;
line-height:100px;
margin:0px auto;
}
</style>
</head>
<body>
<div>
<p>MARGIN:0PX AUTO</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 简单直观 | 被水平居中的元素必需要有固定的宽度 |
1.3 line-height
对于内容是纯文本或者是行内快元素时，最简单的就是经过设置 line-height 实现垂直居中，不过这种方式有很大的不足之处，一是行高的值必须为当前父元素的高度，二是，只能一行，不能有多行。express
| 优势 | 缺点 |
|---|---|
| 简单直观 | 只能做用于内联元素或行内块、只能一行不能多行、行高的值必须为父元素的高度 |
1.4 padding
若是父元素对于高度没有什么要求，能够经过设置 padding-top 与 padding-bottom 为相同值，来实现伪的垂直居中效果。
示例：浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
padding:200px 0;
background:#eee;
text-align: center;
}
p{
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>PADDING</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 很是简单 | 进行伪垂直居中的元素不能有高度 |
2. 水平与垂直同时居中
2.1 挡板方式实现的水平垂直居中
我称这种方式为挡板方式，是由于它在实现方式上很相似。
示例：微信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:600px;
height:600px;
background:#eee;
}
.top{
height:50%;
}
.box1{
width:200px;
height:200px;
background:#aaa;
margin:0px auto;
margin-top:-100px;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="box1"></div>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 不须要定位 | 依然须要计算与设置负边距值 要引入一个废标签 |
Note： 但在实际的使用上若是不考虑IE7-，那个无用的元素可使用伪类替代。markdown
2.2 vertical-align
vertial-align 是CSS的一个属性，该属性只对行内元素或行内快元素产生做用，主要用于设置当前元素与同级相邻元素的垂直对齐方式(基于基线)。经常使用于图片与文字的对齐。
这里则是利用 vertical-align 这种对齐 的特性来在父元素中插入一个高度与其相同的子元素，最后再为该子元素设置 vertical-align 属性来对齐咱们真正的内容。
这种方式仍是蛮巧妙的，可是我认为其局限性在于只能做用于行内或行内快，另外要插入一个无关的废标签，不过该标签能够经过伪类进行代替。
最将 text-align:center 与 vertical-align:middle，结合使用，咱们即可以将行内快元素水平垂直居中
示例：函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:300px;
height:200px;
text-align:center;
background:#eee;
text-align:center;
}
div:after{
content:'';
display:inline-block;
width: 1px;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<button>button1</button>
<button>button2</button>
</div>
</body>
</html>
2.3 模拟单元格特性
咱们知道表格有不少特性，好比宽度的关联伸缩，再好比咱们如今须要用到的垂直居中，而正好的是CSS也能够经过display属性为HTML元素赋予表格元素的特性。
常见的有：
display:table 声明一个表格
display:table-row 声明一个行
display:table-cell 声明一个单元格。布局
简单的使用示例（快速入门）：flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.table{
display:table;
border:1px solid #ccc;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">ROW1-CELL1</div>
<div class="cell">ROW1-CELL2</div>
</div>
<div class="row">
<div class="cell">ROW2-CELL1</div>
<div class="cell">ROW2-CELL2</div>
</div>
</div>
</body>
</html>
所以利用这种手段，咱们也能够实现须要的水平垂直居中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:table-cell;
width:500px;
height:500px;
background:#eee;
vertical-align:middle;
text-align: center;
}
p{
display:inline-block;
background:#aaa;
}
</style>
</head>
<body>
<div class="box">
<p>
TABLE-CELL-TEST<br/>
TABLE-CELL-TEST<br/>
TABLE-CELL-TEST<br/>
</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 垂直居中多行内容特别是文字内容 | 只有IE8+ 才支持 只能垂直居中内联元素、行内块 |
经过模拟表格的方其优势在于能够垂直居中多行内容，可是缺点就是目前只有IE8+的版本才被支持。
2.4 position + margin:负值
经过定位能够实现水平垂直居中，不过对使用的条件要求较高，首先内容要进行绝对定位(absolute)，父元素要进行相对定位(relative)，其次内容要有固定的尺寸，最后调整margin负值与偏移属性的值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
height:600px;
width:600px;
background:#eee;
}
p{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>MARGIN:0PX AUTO</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 应用范围光 兼容性好 |
进行居中的元素要有固定的尺寸 要计算margin负边距值 |
2.5 position + margin:auto
对于绝对定位的元素来讲,其默认效果是：
- 尺寸会自动收缩适应内容。
- 位置默认的是auto，
- 边距则默认值为0。
此时若是在默认尺寸的状况下，咱们将其四个方向的偏移值都设置为0的话，元素会自动向四个方向拉伸100%贴合其参照元素。若是再设置固定宽度，并设置 margin:auto,那么即可以惊奇的发现，绝对定位的元素会水平垂直居中在父元素（参照元素）中。
关于 margin:auto为何能水平居中块级而不能垂直居中的问题
auto是自动分配的意思，margin:auto,即是自动分配边距的意思。可是根据CSS2.1的规范，块级元素的宽度是参照其父元素的宽度（也就是为何块级元素独占一行的缘由），只有宽度是100%，auto才可以进行分配，而后让元素水平居中，可是问题来了，CSS规范同时也定义了块级元素的高度是根据内容适应，也就是说块级元素的高度是不可知的，因此为上下边距设置auto固然不能进行垂直居中。然而当咱们给一个元素进行定位，使其成为块级元素并脱离文档流时，又同时为其设置top:0;right:0;bottom:0;left:0，便会将该元素的尺寸彻底贴合其父元素或参照元素，即width:100%,height:100%,那么此时再设置margin:auto,即可以进行水平/垂直居中。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
position:relative;
width:600px;
height:600px;
background:#aaa;
}
p{
position:absolute;
width:200px;
height:200px;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>This is Position Advace</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 使用条件简单 无需计算负边距值 |
进行居中的元素要有固定的尺寸 只有IE8+支持 |
2.6 position + translate
经过CSS3的 translate 实现的水平垂直居中，其原理与position+margin负值的方式很相似。
可是相比于margin负值方式，其优势体现于：
- 不须要为内容设置固定的宽度。
- 不须要手动计算负边距值。
transform:translate(-50%,-50%) 能够自动向左与向上移动当前元素宽度的50%。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
height:600px;
width:600px;
background:#eee;
}
p{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>transForm</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 能够不须要为居中的盒子设置固定的尺寸 手机端 |
只有IE9+支持 |
2.7 position + calc
calc() 是CSS3的函数属性，其功能是进行四则运算，参与运算的值能够是相对单位，也能够是绝对单位。
利用calc进行居中的原理其实就是经过为left:50%,top:50%,而后让50%再减去当前元素宽度或者高度的一半，其机制仍然属于负边距方式，但相比于position的负边距以及于translate等方式，它主要减小了样式的声明数量。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
position:relative;
width:600px;
height:600px;
background:#aaa;
}
p{
position:absolute;
width:200px;
height:200px;
left:calc(50% - 100px);
top:calc(50% - 100px);
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>CSS3 - CALC</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 减小样式声明 手机端 |
须要为居中的元素设置固定尺寸 只有IE9+、Chrome19+ |
2.8 相对于viewport进行水平垂直居中
CSS3中引入了新的度量单位，vh 与 vw，它们都是基于viewport的相对单位，即viewport的宽度与高度分别被分为100等份的vh 与 vw。
也就是说：
1vh = 1%(viewport的高度)
1vw = 1%(viewport的宽度)
那么为当前元素的尺寸设置为 50vh与50vw 即当前窗口的高度与宽度的一半，再结合 translate(50%,50%) 即可以将当前元素水平垂直居中在当前窗口中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{
position:absolute;
width:50vw;
height:50vh;
transform:translate(50%,50%);
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>CSS3 - CALC</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 在基于窗口的环境下使用 | 只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持 固定尺寸 |
2.9 css3 - flex
flex可谓是CSS3加入的强大布局特性，利用flex咱们能够实现灵活方便且可塑的布局方案。
利用flex布局只须要简单的设置两行样式声明便可实现元素的水平与垂直居中。
justify-content:center 水平居中排列
align-items:center 垂直居中排列
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
display:flex;
justify-content:center;
align-items:center;
text-align: center;
background:#eee;
}
p{
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>FLEX</p>
</div>
</body>
</html>
| 优势 | 缺点 |
|---|---|
| 移动端 无需设置固定尺寸 |
兼容性低版本IE不支持 |
3 图片相关的水平垂直居中
专门用于图片水平垂直居中的CSS方法，而且如下方法均可以在全部浏览器中获得兼容。
3.1 背景图方式
这种方式最简单，就是将图片做为背景图，而后设置 background-position:center center 让其水平垂直居中在元素中。
3.2 CSS 表达式
这种方式要借助IE的私有扩展，而且这种方式的好处是能够兼容到IE5。
缺点也很明显，就是只能用于图片，由于这涉及到CSS表达式中的 this.height。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:table-cell; /* 在高版本浏览器中经过表格特性进行垂直居中图片 */
width:500px;
height:500px;
vertical-align: middle;
background:#eee;
}
.box img{
display: block;
margin:0px auto;
margin-top:expression((500 - this.height)/2); /* IE 浏览器的专有CSS 表达式属性 */
}
</style>
</head>
<body>
<div class="box">
<img src="http://nec.netease.com/img/s/1.jpg" alt="" />
</div>
</body>
</html>
3.3 button 方式
这种方式有些过滤奇技淫巧，可是好处就是能够兼容全部浏览器，可是在IE浏览器中会有稍微的瑕疵，也就是当单击的时候，图片会有轻微的晃动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
button{
height:500px;
width:500px;
background:#eee;
border:none;
outline:none;
}
</style>
</head>
<body>
<button>
<img src="http://nec.netease.com/img/s/1.jpg" alt="" />
</button>
</body>
</html>
3.4 网易NEC - 很适合图片的方法
这种网易NEC发明的方式，其优势在于只要图片的尺寸不超过父元素，图片都会在父元素中居中。
原理：
首先为外层盒子进行相对定位，而后为内部盒子进行绝对定位，而且尺寸是由其内容（图片）撑开，再为内部盒子设置偏移值 left:50%;top:50%;最后再将其内部放入两个img标签，但引用的都是一张图片，其中一张图片进行占位隐藏用于让内部盒子识别尺寸，另外一张图片则是用来显示，而且这张图片再进行绝对定位，而后left:-50%;top:-50%，这样即可以将图片水平、垂直居中在父元素中。
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
position:relative;
width: 600px;
height: 600px;
background:#eee;
}
.inner{
position:absolute;
left:50%;
top:50%;
}
.inner .img1{
visibility: hidden;
}
.inner .img2{
position:absolute;
left:-50%;
top:-50%;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<img class="img1" src="http://nec.netease.com/img/s/1.jpg" />
<img class="img2" src="http://nec.netease.com/img/s/1.jpg" />
</div>
</div>
</body>
</html>
呼~~ 终于把博客园的markdown改好了，之后就决定用这个样式了，感受园子的markdown真心很差用啊，功能也不全。。
若是以为本文对您有帮助或者您心情好~能够支付宝(左)或微信(右)支持一下，就当给做者赞助包烟钱了
~~：
- 1. CSS 居中方法集锦
- 2. css居中方法
- 3. CSS居中方法
- 4. [译]CSS 居中（Center）方法大合集
- 5. CSS垂直居中方法
- 6. css水平居中方法
- 7. css 集锦。
- 8. css中垂直居中的方法
- 9. css中div垂直居中的方法。
- 10. CSS中元素水平居中和垂直居中的方法
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • ☆技术问答集锦（13）Java Instrument原理
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS 居中方法集锦
- 2. css居中方法
- 3. CSS居中方法
- 4. [译]CSS 居中（Center）方法大合集
- 5. CSS垂直居中方法
- 6. css水平居中方法
- 7. css 集锦。
- 8. css中垂直居中的方法
- 9. css中div垂直居中的方法。
- 10. CSS中元素水平居中和垂直居中的方法