这类问题是面试中经常出现的css问题。那么你会吗？会的话，你能想出几种解决方案呢？我这里大致列举六个方法！
1.弹性盒模型flex布局
<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; display: flex; justify-content: center; /*主轴居中对齐*/ align-items: center; /*交叉轴即y方向剧中对齐*/ } .box{ width: 333px; height: 333px; background: blue; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body>
2.利用伪类来对齐
<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; text-align: center; } .wrap:after{ display: inline-block; content: ''; height: 100%; /*0;*/ vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body>
3.利用空span，原理与上面的类似
<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; text-align: center; } span{ display: inline-block; height: 100%; vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="wrap"> <div class="box"></div><span></span> </div> </body>
4.利用表格的特性：单元表格的内容默认垂直居中
<style type="text/css">
.wrap{ width:500px; height: 500px; background: red; text-align: center;
border-collapse: collapse;
} .box{ width: 333px; height: 333px; background: blue; display: inline-block; /*margin: 0 auto;*/ /*或者*/ } </style> </head> <body> <table class="wrap"> <td><div class="box"></div></td> </table> </body>
5.将块标签转换成表格属性，display:table-cell
<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; display: table-cell; text-align: center; vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body>
6.利用相对定位和transform
<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; /*display: table-cell;*/ /*text-align: center;*/ } .box{ width: 333px; height: 333px; background: blue; position: relative;//不脱离文档流，left,top移动父级的百分之五十 left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%)//即使未知元素自身宽高，自动计算后x,y轴移动元素自身宽高的负百分之五十 } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body>
总结：span和伪类对齐方法主要是利用了空内容将基线定在了父级元素的中间位置，然后用inline-block结合vertical-align:middle. table的2种方法则是利用了表格的自带属性，弹性盒模型的话就不用多说了，强大的爱不释手，
transform和相对定位结合处理的话，因为要依据父级宽高所以用相对定位，用绝对定位的话会一层层找到顶级，transform再根据自身宽高负方向移动半个宽高。
关于基线对准问题可参考张鑫旭老师的博客，写的非常详细，可自行百度。
关于弹性盒模型的参数介绍可查看文档或者是阮一峰老师的博客。