css元素居中的方式

在我们日常编写代码中，有各种各样的编写方式，其中，“元素居中” 占据很重要的地位，今天，我把 CSS 元素居中都罗列一下，自己复习方便，大家也都可以学习一下。

1、文字居中 text-algin:center;

用text-algin实现居中效果

这里添加的文字的是p标签 ，通过使用 text-algin 属性让中间文字居中对齐 实现的代码。

<div class="fater">
        <p class="child">
            文本居中
        </p>
    </div>

    

   .fater{
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .child{
        width: 200px;
        height: 100px;
        border: 1px solid red;
        text-align: center;
        line-height: 100px;;
   }

代码实现效果：

2、通过使用vertical-algin:center，来达到居中效果;

---

在内联元素这一类里面：有个特殊的元素 inline-block；而行类块元素支持使用vertical-algin属性，它的属性值：
top （顶线对齐）
middle（中线对齐）
bottom（底线对齐）
baseline（基线对齐）
分析：这里让元素居中的就是添加一个“标尺”，通过标尺来确定顶线，中线，底线，基线，而这里通过使用 display:inline-block,改变元素类型，而span便是那个标尺。
注意：p标签 和 span 标签之间不能有空格，要不然两者之间会有几像素差，会影响元素居中。
下面展示一些 实现的代码。

 <div class="box">
        <p></p><span></span>
    </div>    

  .box{
      width: 400px;
      height: 300px;
      background: orange;
      text-align: center;
      margin: 50px auto;
  }
  .box p{
      height: 100px;
      width: 100px;
      background: blue; 
      display: inline-block; /*因为要添加vertical-align: middle;,这个元素只对inline-block */
      vertical-align: middle;
  }
  .box span{
      /* 确定中线 */
      width: 0px;
      height: 100%;
      background: red;
      display: inline-block;
      vertical-align: middle;
  }

代码实现效果：

3、使用外边距 margin，让元素处于居中的位置;

用margin实现居中效果

在margin中有一个属性值为 auto，这个属性值的作用就是用来水平居中显示，上下居中可以通过计算来达到上下左右居中，下面的代码中：父元素height:200px,子元素height:100px;那么，子元素距父元素上下均为50px状态处于居中下面展示一些 实现的代码。

 <div class="fater">
        <div class="child">
        </div>
    </div>

    

     .fater{
        width: 300px;
        height: 200px;
        border: 1px solid black;
    }
    .child{
        width: 200px;
        height: 100px;
        border: 1px solid red;
        margin: 50px auto;/*居中显示*/
    }

代码实现效果：

4、使用内边距padding，让元素处于居中的位置;

用padding实现居中效果

padding是内边距，它不可以为负值，让元素居中状态，通过设置 padding值来达到效果，注意：padding值设置多少，相应的宽高也要减多少，前提是这个元素宽高是有值的状态，没有值就不用减！实现的代码。

 <div class="fater">
        <div class="child">
        </div>
    </div>

    

         .fater{
        /*
        width:300px;
        height:200px; 添加 padding，要在相应的宽高减50px;
        */
        width: 250px;
        height: 150px;
        border: 1px solid black;
        padding-top: 50px; /*距顶部50px*/
        padding-left: 50px;/*距左边50px*/
    }
    .child{
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }

代码实现效果：

5、使用定位position来让元素居中

---

定位是我们经常使用的属性，他可以来调整我们元素的位置，但是定位也不轻易使用，容易影响网页的布局
第一方式：通过top ，left，bottom，right 的值来改变位置
实现的代码。

 <div class="fater">
        <div class="child">
        </div>
    </div>
   

        .fater{
        width:300px;
        height:200px; 
        background:  black;
        position: relative;
    }
    .child{
        width: 200px;
        height: 100px;
        background:  red;
        position: absolute;
        top: 50px;
        left: 50px;
    }

代码实现效果：

第二种方式：top，bottom，right，left，都为0，使用margin来居中，
实现的代码。

<div class="fater">
       <div class="child">
       </div>
   </div>
  

    .fater{
        width:300px;
        height:200px; 
        background:  lawngreen;
        position: relative;
    }
    .child{
        width: 200px;
        height: 100px;
        background:  red;
        position: absolute;
        top: 0;bottom: 0;
        left: 0;right: 0;
        margin: auto;
    }

代码实现效果：

第三种方式：使用transform来让元素居中
注： top: 50%； left: 50%，只是让子元素的左上角为目标，左上角处于居中位置，但是我们希望让子元素中心点处于居中状态，那么，transform:translate(-50%,-50%);便可以满足我们的需求。
实现的代码。

<div class="fater">
       <div class="child">
       </div>
   </div>
  

    .fater{
        width:300px;
        height:200px; 
        background:  lawngreen;
        position: relative;
        margin: 20px auto;
    }
    .child{
        width: 200px;
        height: 100px;
        background:  red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
    }

代码实现效果：

6、弹性盒子居中对齐;

---

这里使用弹性盒子让子元素居中对齐，其中 justify-content: center;水平居中；
align-items: center;垂直居中，两者相结合，让子元素在父元素中间显示，
实现的代码。

<div class="box">
        <div class="box1"></div>
    </div>
    

    .box{
        width: 500px;
        height: 400px;
        background: black;
        margin: 50px auto;
        display: flex;
        justify-content: center; /*水平居中*/
        align-items: center; /*垂直居中*/
    }
    .box1{
        width: 300px;
        height: 200px;
        background: red;
    }

代码实现效果：

第二种方式：直接给子元素添加一个 margin:auto;

<div class="box">
        <div class="box1"></div>
    </div>
    

    .box{
        width: 500px;
        height: 400px;
        background: black;
        display: flex; /*弹性盒*/
    }
    .box1{
        width: 300px;
        height: 200px;
        background: red;
        margin: auto; /*居中对齐*/
    }

代码实现效果：

7、2D位移方式让元素居中对齐;

---

在2D的属性中有一种属性，transform:translate(x轴，y轴)，这个位移属性，可以更改元素的位置，通过二维坐标，来调整位置达到元素居中效果。
实现的代码。

<div class="father">
    <div class="child"></div>
</div>
    

    .father{
        width: 300px;
        height: 300px;
        background: black;
    }
    .child{
        width: 100px;
        height: 100px;
        background: gray;
        transform: translate(100px,100px);
    }

代码实现效果：

以上便是我脑子出现的方法，后续有方法继续添加！！