一、水平居中
1）如果是行内元素，需要在它的父元素上设置text-align: center;
2）如果是块元素，直接设置元素的css属性text-align: center;
或则可以定宽再加上margin:0 auto;
p{ width: 300px; margin:0 auto; } p{margin:auto;}
二、垂直居中
垂直居中的时候情况会比较多，根据不同的情况分别有下列几种方法
1）表格布局法------不用知道需要居中的元素是什么东西
利用表格的vertical-align属性，当然首先将父元素的显示方式设置为表格：
CSS代码
.content,.content2{ border: 1px solid #1369C0; height: 300px; width: 300px; margin:0 auto; text-align: center; display: table; } .content span,.content2 .wrap{ display: table-cell; vertical-align: middle; }
HTML代码
<div class="content">
<span>元素垂直居中</span>
</div>
<div class="content2">
<div class="wrap"><img src="img/collection.png" /></div>
</div>
对于图片，我们需要在它的外面加上一层包裹，否则它不会居中，而有的不需要，所以，为了方便或则统一，我们需要在要居中的元素外层再添加一层包裹，如上面的.wrap,好处是不用知道需要居中的元素是什么东西，比如上面的img标签，在css中未对其位置进行任何设置。
2）伪元素法
具体思路是给居中元素的包裹层加一个伪元素（:before或则:after），content为空，使其高度为包裹元素的100%，然后设置该元素和居中元素的dispaly属性为inline-block,同时vertical-align:middle。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> .content,.content2{ border: 1px solid #1369C0; height: 300px; width: 300px; margin:0 auto; text-align: center; } .content:before,.content2:before{ content: ""; height: 100%; display: inline-block; vertical-align: middle; } .content p{ display: inline-block; } </style> </head> <body> <div class="content"> <p>元素垂直居中</p> </div> <div class="content2"> <img src="img/collection.png" /> </div> <p>块元素水平居中</p> </body> </html>
3、基于绝对定位的方法--------需要知道先知道居中的元素是哪一个
1）定宽、定高的元素（绝对定位+负的外边距）
实现原理：先把要居中的元素的左上角放在已定位祖先元素的正中心，然后再利用负外边距把它向左、向上移动（移动距离相当于自身宽高的一半），从而把元素的正中心放置在祖先元素的正中心。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> .content,.content2{ border: 1px solid #1369C0; height: 300px; width: 300px; margin:0 auto; text-align: center; position: relative; } .ele{ position: absolute; width: 100px; height: 30px; top: 50%; left: 50%; margin-left: -50px; margin-top: -15px; } </style> </head> <body> <div class="content"> <div class="ele">元素垂直居中</div> </div> <div class="content2"> <div class="ele"> <img src="img/collection.png" /> </div> </div> <p>块元素水平居中</p> </body> </html>
在设置CSS定位的时候也可以借助CSS3中强大的calc()函数
2）定宽、定高的元素（绝对定位+margin:auto）
实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块的尺寸需要固定.
代码和上面一样，改动.ele即可
.ele{
position: absolute;
100px;
height: 30px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
3) 绝对定位+transform反向偏移 (不需要定宽和定高)
使用这种方法对于居中元素宽高没有要求的原因是在translate()变形函数中使用百分比时，是以这个元素本身的宽度和高度为基准进行换算和移动的。
只需要将1）中得margin换掉即可。
.ele{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%，-50%);
}
4、Flex布局模型法
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
300px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
5、单行文本居中
设置height与line-height的值一样
6、多行文本居中
类似于上面的table法和flex法都可以。