水平居中与垂直居中

一、水平居中

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法都可以。