未知宽高div水平垂直居中2种方法

1.<style>

    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100%;
        height: 400px;
        text-align: center;
        background: #eaeaea;
    }

    .box:after {
        content: '';
        display: inline-block;
        width: 100px;
        height: 100%;
        vertical-align: middle;
    }

    .box div {
        background: #ccc;
        vertical-align: middle;
        display: inline-block;
    }

</style>

<div class="box">
    <div>
        　　　　<p>ASDEWQ</p>
        　　　　<p>ASDEWQ</p>
        　　　　<p>ASDEWQ</p>
        　　　　<p>ASDEWQ</p>
        　　
    </div>
</div>

2.

1. <div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1  
2.     <div class="modal">  
3.         <div class="modal-header">弹出窗标题</div>  
4.         <div class="modal-body">  
5.             微信开发者大会（北京）的成功举办，引起业界的极大关注。  
6.             应广大微信开发者的强列要求，深圳微信开发者大会也在如火如荼的筹备中。  
7.             本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由      
8.         </div>  
9.     </div>  
10. </div>  

1. <style type="text/css">  
2. .modal-header {  
3.   padding: 10px 20px;  
4.   background: rgba(0,0,0,.25);  
5.   color:#fff;  
6. }  
7. .modal-body{  
8.   padding: 20px;  
9.   background: #fff;  
10. }  
11. .modal {  
12.   border: 1px solid #888;  
13.   border-radius: 5px;  
14.   box-shadow: 0 0 3px rgba(0,0,0,.5);  
15.   /**主要代码*/  
16.   position:absolute;  
17.   top:50%;  
18.   left: 50%;  
19.   -webkit-transform: translate(-50%, -50%);  
20.   transform: translate(-50%, -50%);  
21. }  
22. </style>