CSS垂直与水平居中

水平居中：
水平居中比较简单，所以在这里不做过多介绍，常用的方法是margin:auto 0 与 text-align:center
垂直居中
1.vertical-align:middle;是设置元素的垂直排列居中，但我们会经常遇到一个问题就是用了这个属性但似乎没有效果，因为它只对一些特定显示样式的元素才会起作用。所以要实现上下垂直居中对齐，可以同时给元素设置display:table-cell;（按照单元格的样式显示元素）属性。vertical-align:middle一般常用的属性有：
top：将支持valign特性的对象的内容与对象顶端对齐。
text-top：将支持valign特性的对象的文本与对象顶端对齐。
middle：将支持valign特性的对象的内容与对象中部对齐。
bottom：将支持valign特性的对象的文本与对象底端对齐。
text-bottom：将支持valign特性的对象的文本与对象底端对齐
例如下列：
HTML元素：
<div class="ex1">
<span>我垂直居中啦！</span>
<span>我垂直居中啦！</span>
<span>我垂直居中啦！</span>
</div>
css：
<style>
.ex1{ width:300px; height:200px; border:2px solid red;border-radius:5px;vertical-align: middle;display:table-cell;}
</style>
就能达到垂直居中效果，但这时margin将会失去效果，padding任然能起作用。由上可知一般支持vertical-align属性的元素为单元格显示方式：table-cell，效果类似于<td>，以下例子也能达到以上效果：
<table style="border:2px solid red;border-radius:5px;margin-top:10px;width:300px;height:200px;">
<tr style="background-color:gray;height:100%;">
<td style="vertical-align:bottom;">我垂直居底部啦！</td>
<tr>
</table>
缺点是外层容器必须是是固定宽高的，否则无效。
2.第二种方法是将行距增加到和整个DIV一样高： line-height:200px; 然后插入文字，就垂直居中了。但是缺点是要控制内容不能换行 。
3.那么要实现不固定宽高居中就要写JS来动态控制，代码如下：
$(function(){
        //窗口初始化
        var height=$(window).height();
        height=Math.round((height-600)/2);
        $("#formcss").css({"top":height});

        window.onresize = function(){
            //窗口监听
            var height=$(window).height();
            height=Math.round((height-600)/2);
            $("#formcss").css({"top":height});
        }

    })