在网页布局中，我们往往会遇到下图所示的场景，让小图标和文字对齐
可能有的小伙伴会说，这个简单，直接给小图标设置左浮动来实现。
这样做是可以的，但不推荐，毕竟浮动是会影响布局的，能少用还是少用。
以前遇到这种场景，其实挺头疼的，我是直接给小图标设置相对定位，然后调整top值。好像找不到更好的办法，也就没去管了。
直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解，感觉发现了新大陆。
下面总结了2种方法，只需要一句代码即可解决（强烈推荐第二种）
①：给小图标加上 vertical-align:middle;
以前因为IE6,7对该属性不支持，所以还要使用csshack，
现在主流浏览器都已经很好的支持了，而且谁还管万恶的低版本IE浏览器兼容喔（eat shift）
②：给小图标加上 vertical-align:-2px;（这里的负值根据你的情况自行设置，这种方法没有兼容性问题）
注：如果当你遇到第一种方法用了没有效果或者用着很不开心的时候，强烈推荐使用第二种方法
顺便总结了一些其它小技巧，害怕自己以后忘记，也希望帮到有需要的小伙伴
问题1：怎么让定位元素垂直居中的三种方法？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div01 { width:200px; height:200px; background-color:#6699FF; position:absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div class="div01"></div> </body> </html>
注：top right bottom left设置为0 + margin设置为auto
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div01 { width:300px; height:200px; background-color:#6699FF; position:absolute; top:50%; left:50%; margin-top: -100px; margin-left: -150px; } </style> </head> <body> <div class="div01"></div> </body> </html>
注：top和left设置为50% + margin-left和margin-top为负值，分别设置值为元素宽高的一半
注： 上面2种是在知道具体宽高的情况下，如果不知道元素宽高怎么让其垂直居中呢？（利用transform属性）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <img src="img/1.jpg" /> </body> </html>
另一种方法是利用flex实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="tutu"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex实现垂直居中</title> </head> <style> ul { list-style: none; padding: 0; margin: 0; } ul li { background: #000; } ul li p { padding: 10px; margin: 0; color: #fff; } /* flex实现关键代码 */ .test-1 ul { display: flex; } .test-1 li { box-sizing: content-box; display: flex; justify-content: center; align-items: center; width: 33.3%; border: 1px solid red; } </style> <body> <div id="app"></div> <div class="test-1"> <ul> <li> <p> 床前明月光，疑是地上霜，举头望明月，低头思故乡 </p> </li> <li> <p> 床前明月光，疑是地上霜，举头望明月，低头思故乡 </p> </li> <li> <p> 床前明月光，疑是地上霜，举头望明月，低头思故乡 </p> </li> </ul> </div> </html>
问题2：怎么让文字垂直居中？
(给一个空标签，然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字垂直居中</title> <style type="text/css"> .test { width: 500px; padding: 10px; border: 1px solid red; text-align: center; } .test div { display: inline-block; padding: 3px; width: 200px; border: 1px solid #CCCCCC; } .test span { display: inline-block; height: 100%; width: 1px; vertical-align: middle; } </style> </head> <body> <!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中--> <div class="test"> <div> 青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？
少壮不努力，老大徒伤悲。青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？ 少壮不努力，老大徒伤悲。 </div> <span></span> </div> </body> </html>
注：上面方法稍微麻烦了点，最简单粗暴的方法是把某元素height和line-height属性值设置为相同值
问题3：怎么让一个块元素水平居中，块元素里的文字也水平居中？
给这个块元素设置一个固定宽度，然后加上margin:0 auto; 在给里面的元素设置text-align:center;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .main { width: 400px; margin: 0 auto; background-color: chocolate; } .main p { color: #fff; text-align: center; } </style> </head> <body> <div class="main"> <p>珍爱生命，远离IE</p> </div> </body> </html>
补充：最简单的实现左边定宽，右边自适应布局（给左边设置固定宽度，然后加浮动；右边设置宽度百分百，不加浮动）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; color: #fff; font-size: 30px; font-weight: bold; text-align: center; box-sizing: border-box; } aside { float: left; width: 200px; height: 200px; line-height: 200px; background: #5A6A94; } section { width: 100%; height: 200px; line-height: 200px; background: #BE4F4F; } </style> </head> <body> <!-- 左边定宽 --> <aside class="left">Left</aside> <!-- 右边自适应 --> <section class="right">Right</section> </body> </html>
有需要的朋友可以领取支付宝到店红包，能省一点是一点
