<html> <style> /*display:table-cell实现水平垂直居中*/ /*组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！*/ .parent { display: table-cell; text-align: center; /*水平居中*/ vertical-align: middle; /*垂直居中*/ width: 300px; height: 300px; background: red; } .child { display: inline-block; width: 50px; height: 50px; background: green; line-height: 50px; text-align: center; color: white; }</style> <body> <div class="parent"> <div class="child">Demo</div> </div> </body> </html>
