在css中对元素进行水平居中是非常简单的，然而使元素垂直居中就不是一件简单的事情了，多年以来，垂直居中已经成为了CSS领域的圣杯，因为它是极其常见的需求，但是在实践中却不是一件简单的事情。下面我会简单介绍水平居中，并着重讨论垂直居中。
第一部分：水平居中
1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{text-align: center;} img{width: 200px;height: 200px;border: thin solid red;} </style> </head> <body> <div> <img src="pic.png"> </div> </body> </html>