如下图所示布局：将图片水平、垂直居中。
提供2种实现方案
首先，了解一下vertical-align，此处参考MDN
vertical-align是 用来指定行内块元素(inline-block)或表格单元格（table-cell）元素的垂直对齐方式
比较常见的4种用法：
vertical-align: top;vertical-align: middle;vertical-align: baseline;vertical-align: bottom;方案一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; margin: 50px auto; background-color: gray; text-align: center; } /*先用辅助标签span将高度撑开 */ .box span{ display: inline-block; height: 100%; width: 1px; background-color: red; vertical-align: middle; } /*图片垂直居中*/ .box img{ vertical-align: middle; } </style> </head> <body> <div class="box"> x<img src="./mz3.jpg" alt=""><span></span> </div> </body> </html>效果如下：
方案二：
前面方案加span的主要原因是撑开一个高度，其实我们可以直接用给父元素加line-height来撑开，实现如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; line-height: 300px;/*通过文字行高撑开300px的高度*/ font-size: 30px;/*文字大小无所谓，这里只是方便显示x*/ margin: 50px auto; background-color: gray; text-align: center; } .box img{ vertical-align: middle;/*与x的中线对齐*/ } </style> </head> <body> <div class="box"> x<img src="./mz3.jpg" alt=""> </div> </body> </html>效果如下：
类似应用还有实现登录、注册时，在前面加"*"星号提示为必填项，原理类似：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0;} b{font-weight: normal;} div{ width: 500px; margin: 0 auto; height: 50px; line-height: 50px;/*直接line-height'*'无法垂直居中*/ text-align: center; background-color: pink; margin-bottom: 10px; } div span{ color: red; font-weight: bolder; margin-right: 8px; } .box2 span{ display: inline-block; height: 30px; line-height: 33px; vertical-align: middle; } </style> </head> <body> <div class="box1"> <span>*</span>直接line-height无法实现星号垂直居中 </div> <div class="box2"> <span>*</span>你好，世界X </div> </body> </html>效果如下：
