大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**.div1里面内容居中,img也是.div1的内容,所以图片居中生效,但是这种写法,所有内容都居中**/ .div1 { text-align: center; } /**意思:.div里面img元素里面的内容居中,图片本身没有"内容" 所以这里无效**/ .div1 img { text-align: center; } /**上面的居中,是要找到父组件,设置内容居中**/ .div2 { } /**通过使用组件的外边距原理,不需要特意找父组件,实现子组件独立设置样式进行居中 使用外边距居中,首先吧组件显示方式改为块级元素:这个组件独占一行后,margin:auto,实现自动相对父组件进行外边距居中. **/ .div2 .img2 { display: block; margin: 20px auto; } .imgcenter { display: block; margin: 20px auto; } .div2 .ul1 { border: #f6e415 5px solid; display: block; margin: 20px auto; /**有文本就需要用text-align**/ text-align: center; list-style-type: none; } </style> </head> <body> <div class="div1"> <img src="http://img.studyofnet.compics/logocss.gif"> </div> <div style="width: 500px;border: aquamarine 5px solid;"> <img class="imgcenter" src="http://img.studyofnet.compics/logocss.gif"> </div> <div class="div2"> <img class="img2" src="http://img.studyofnet.compics/logocss.gif"> </div> <div class="div2"> <ul class="ul1"> <li>a</li> <li>b</li> <li>c</li> </ul> </div> </body> </html>
,
