使用css实现水平垂直居中

1、通过absolute和margin实现（适用于弹窗，具体位置随浏览器屏幕大小变化改变）
这种方式需要居中元素的父级必须采用绝对定位或相对定位，被居中元素的尺寸需要固定。

<div class="frame">
    <div class="frame-child"></div>
</div>

css样式如下：
.frame{
    position:relative;
    width:400px;
    height:400px;
}
.frame-child{
    position:absolute;
    width:200px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
}

2、通过text-align、vertical-align和inline-block来实现
这种方式需要借助一个依托dom来实现，父级尺寸需要给定。依托dom的高度需要和父级的高度一样。

<div class="frame">
    <div class="frame-child"></div>
    <div class="frame-operate"></div>
</div>
css样式如下：
.frame{
    width:600px;
    height:400px;
    text-align:center;
}
.frame-child{
    display:inline-block;
    height:200px;
    vertical-align:middle;
}
.frame-operate{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

3、通过line-height，text-align实现
这种方式一般用于行内元素。
<div class="frame">
    <div class="frame-child"></div>
</div>
css样式如下：
.frame{
    width:400px;
    height:400px;
    text-align:center;
    line-height:400px;
}
.frame-child{
    display:inline-block;
}