居中

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实现的

理想中想达到的效果，参考明道软件