1、通过margin: 0 auto; text-align: center实现CSS水平居中。
这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。
2、通过display:flex实现CSS水平居中。
随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3、通过display:table-cell和margin-left实现CSS水平居中。
对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。
最简单的方法就是把你的body这样设置：
注意：中间的那个div就是要居中的内容，这种房价浏览器都兼容。
可以通过设置图片的宽度，利用margin和display属性来实现。1. 首先，将图片的宽度设置为需要的大小，比如70%。2. 接着，使用margin属性设置左右margin为auto，即margin:0 auto，这样图片就能够水平居中。3. 最后，将display属性设置为block，这样图片就能够在其容器中垂直居中了。所以，使用这些属性可以轻松地实现css将图片放大居中的效果。
css把图片居中的方法步骤
一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; }这段代码可以达到效果。
二、内边距（padding）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：p { padding:30px; }