http://codepen.io/chriscoyier/pen/HulzB
参考资料：
CSS 居中（Center）方法大合集 https://segmentfault.com/a/1190000005353303
Flex 布局教程：语法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
文章中涉及到的其他知识点：
css
伪类 ::before
弹性布局 flex
文本属性 white-space:nowrap
变换属性 transform:translate(-50%,-50%)
js
点击元素以外隐藏元素本身 closet
一、普通文档流居中
1.水平居中
a.行内元素居中
text-align:center
b.块级元素
单个
width:固定宽度;margin:auto
浮动元素居中
多个
并排显示，高度无要求 display:inline-block
并排显示，要求高度相同 display:flex 弹性布局
显示成一列 margin:auto
2.垂直居中
a.行内元素
单行内容
(1).link{
padding-top:30px;
padding-bottom:30px;
}
(2).center-text-trick{
height:100px;
line-height:100px;
white-space:nowrap;//不换行
}
多行内容
(1)verticle-align:middle
(2).flex-center-vertically{
display:flex;
justify-content:center;
flex-direction:column;
height:400px;
} //父元素不指定高度也能垂直居中
(3).ghost-center{
position:relative;
}
.ghost-center::before{
content:" ";
display:inline-block;
height:100%;
width:1%;
vertical-align:middle;
}
.ghost-center p{
display:inline-block;
vertical-align:middle;
}
b.块级元素
元素高度已知
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
height:100px;
margin-top:-50px;/* account for padding and border if not using box-sizing: border-box; */
}
元素高度未知
(1). .parent{
position:relative;//position:fixed也行
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
(2).parent{
display:flex;
flex-direction:column;
justify-content:center;
}
3.水平&垂直均居中
元素的宽度或高度未知
(1).parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
(2).parent{
display:flex;
justify-content:center;
align-items:center;
}
二、弹出层居中（实践中的重点）
项目中遇到的主要问题：弹出框宽度和高度未知的居中问题
(1)
外层modal框 position:fixed;width:100%;height:100%;top:0;left:0;z-index
内层modal-content块 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
(2)爱游邦
网站的遮罩.msgbox-bg{ //为了点击弹层元素以外隐藏弹层本身
display:none;
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
}
弹层外层.msgbox-user{
display:none;
position:fixed;
right:0;
left:0;
top:0;
bottom:0
margin:auto;
width:466px;
z-index:9999;
}
弹层内容
#personal-tailor{
position:relative;
z-index:99999;
width:454px;
height:558px;
overflow:auto;
margin:auto;
}
(3)沃亚旅行
(1)登录类弹层 必须给定高度才能垂直居中，弹层只有一层比爱游邦少一个外层包装
(2)网站默认提示信息
(3)信息提示类弹层
(4)我的消息侧栏层
目前是用iframe实现的
理想中想达到的效果，参考明道软件
网友评论