1.如果ul下有很多li，需要在一行显示，并且设置margin。但是通常要取消第一个li的margin-left。使用：first-child有的浏览器不兼容。
解决：.li+.li{ margin-left: 5px; }适用场景：单行左对齐，有间距
2.多行文字垂直居中
li{ display:table;}li>span{ display:table-cell; vertical-align:middle;}
3.设置图片宽度100%，高度等于宽度
img{ width:100%; height:0; padding-bottom:100%;}
让图片垂直居中一直没有找到一个很好的办法，今天学习重温after伪类的时候突然看到一个解决方案，觉得很好。
HTML代码：
<body> ???<div class="pic_box"> ???????<img src="images/img-mobile-1.jpg"/> ???</div></body>
CSS代码：
<style> ???????.pic_box{ ???????????width:300px; ????????????height:300px; ????????????background-color:#beceeb; ????????????font-size:0; ????????????*font-size:200px; ????????????text-align:center; ???????} ???????.pic_box img{vertical-align:middle;height:100px;} ???????.pic_box:after{ ???????????display:inline-block; ????????????width:0; ????????????height:100%; ????????????content:"center"; ????????????vertical-align:middle; ????????????overflow:hidden; ???????}</style>
效果图：
css技巧
原文地址：https://www.cnblogs.com/wanf/p/8794635.html