水平居中
行内元素：给父元素添加 text-align: center;(文本 / 图片)
块级元素：
确定宽度：margin: 0 auto;
不确定宽度： 1. 把块级元素变成行内元素, display:inline-block; text-align:center;
2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%;
3. table{margin: 0 auto;}
垂直居中
父级高度确定
单行文本：line-height: height;
多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+>
2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg：多行文字的水平垂直居中
多行文字的水平垂直居中
<style> .multiLineWordContainer{ display: table-cell; border: 4px solid #beceeb; height: 300px; vertical-align: middle; } </style> </head> <body> <div class="multiLineWordContainer"> 这里的文字用来做多行文字垂直居中对齐的测试。<br> 这是第二行文字，您还可以再添加一行文字做测试！<br> 这是第3行文字，您还可以再添加一行文字做测试！<br> 这是第4行文字，您还可以再添加一行文字做测试！ </div> </body>
大小不固定的图片
<style> ul,li{ list-style: none; margin:0; padding:0; } ul{ margin-top:10px; } li{ height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0; } //方式一 .invisibilityImg{ height:100%; width:1px; vertical-align:middle; } .showImg{ vertical-align:middle; } //方式二 .ulImage li{ height: 150px; text-align: center; line-height: 150px; } .ulImage li img{ vertical-align:middle; } </style> </head> <body> <ul class="imgContainer"> <li> <img class="showImg" src="image/mm1.jpg" /> <img class="invisibilityImg" src="image/pixel.gif"/> </li> <li> <img class="showImg" src="image/mm2.jpg" /> <img class="invisibilityImg" src="image/pixel.gif"/> </li> <li> <img class="showImg" src="image/mm3.jpg" /> <img class="invisibilityImg" src="image/pixel.gif"/> </li> </ul> <ul class="ulImage"> <li><img src="image/mm1.jpg" /></li> <li><img src="image/mm2.jpg" /></li> <li><img src="image/mm3.jpg" /></li> </ul> </body> </html>