CSS 居中
一、水平或垂直居中
1. 单行内容垂直居中
/*height = line-height*/
.center{
height: 4em;
line-height: 4em;
overflow: hidden; /*保护布局，非必须*/
}支持：所有块级、内联元素、所有浏览器
缺点：只能显示一行
2. div水平居中
<!--html代码-->
<div class="center">div居中了</div>body{ text-align:center}
.center{
margin:0 auto; /*main*/
width:400px;
height:100px;
border:1px solid #F00
} 3. float
给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现
二、水平+垂直居中
1. 非固定高度居中
.middle{
position:absolute;
top:10px;
bottom:10px;
}支持：所有块级、内联元素、所有浏览器 缺点：容器不能固定高度
2. 利用表格
.middle{
display: table-cell;
height: 300px;
vertical-align: middle;
}缺点：IE无效
3. margin负值
.middle {
width: 400px;
height: 200px;
position: absolute;
top: 50%; left: 50%;
margin-left: -200px; /* width/2 */
margin-top: -100px; /* height/2 */
}支持：ie各个版本
缺点：非响应式，宽高固定，需要为padding预留空间或用box-sizing:border-box
4. 完全居中
<!DOCTYPE html>
<html>
<head>
<title>text-align</title>
<style type="text/css" media="screen">
body {
text-align: center
}
.middle {
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="middle">center</div>
</body>
</html>5. fixed（可视区域内居中）
.middle {
position: fixed;
z-index: 999; /*设置较大的z-index居于其他元素上方 最好在外层容器设置position:relative */
}6. transform
.middle {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}缺点： 不支持IE8
7. inline-block
.middle{
display: inline-block;
vertical-align: middle;
text-align: center;
}8. Flex方法
<div class="container">
<!--容器内的元素将会居中-->
<img src="a.jpg">
</div>.container{
display: flex;
justify-content: center;
align-items: center;
}
/*考虑兼容性 */
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}1.设置container的display的类型为flex，激活为flexbox模式。
2.justify-content定义水平方向的元素位置
3.align-items定义垂直方向的元素位置
支持：任意宽高
不支持IE8-9
三、图片居中
1. align
<div align="center"><img src="a.jpg" /></div> 2. text-align
<div style="text-align:center"><img src="a.jpg" /></div> 四、对照表
所用样式 | 支持的浏览器 | 是否 响应式 | 内容溢出后的样式 | resize:both | 高度可变 | 主要缺陷 |
|---|---|---|---|---|---|---|
Absolute | 现代浏览器&IE8+ | 是 | 会导致容器溢出 | 是 | 是* | ‘可变高度’的特性不能跨浏览器 |
负margin值 | 所有 | 否 | 带滚动条 | 大小改变后不再居中 | 否 | 不具有响应式特性，margin值必须经过手工计算 |
Transform | 现代浏览器&IE9+ | 是 | 会导致容器溢出 | 是 | 是 | 妨碍渲染 |
Table-Cell | 现代浏览器&IE8+ | 是 | 撑开容器 | 否 | 是 | 会加上多余的标记 |
Inline-Block | 现代浏览器&IE8+&IE7* | 是 | 撑开容器 | 否 | 是 | 需要使用容器包裹和hack式的样式 |
Flexbox | 现代浏览器&IE10+ | 是 | 会导致容器溢出 | 是 | 是 | 需要使用容器包裹和厂商前缀（vendor prefix） |
持续更新······
如有建议或其他实现方法，欢迎留言交流~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-06-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读