⽔平居中与垂直居中
⼀、⽔平居中
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>css设置文字垂直居中
</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;
  width: 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;
  width: 300px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
5、单⾏⽂本居中
设置height与line-height的值⼀样
6、多⾏⽂本居中
类似于上⾯的table法和flex法都可以。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。