HTML元素水平垂直居中实现方式（天天一个知识点）

在前端页面开发中，HTML元素水平垂直居中是须要常常处理的问题，今天咱们就来系统的学习一下如何在HTML实现水平垂直居中，经过对主流水平垂直居中实现方式的实践，来找到适合特定状况下的布局实现方式，并逐步达到灵活运用的水平。

水平居中

方式一： text-aligin:center(仅限行内元素)

text-align属性定义行内元素（例如文字）如何相对它的块父元素对齐。当其值为center时能够领行内元素居中对齐。

<style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: orange;
      text-align: center;

    }
</style>

<div class="box1">
  一段用于演示的文字
</div>

方式二：margin:0 auto

margin用来设置一个块元素的偏移量，其值有四个参数，分别表明：上、右、下、左四个方向的偏移量（顺时针）。其值能够简写为两个，第一个值表明上下两侧的偏移量，第二个值表明左右两侧的偏移量，当咱们给左右两侧的偏移量设置为auto时，表明咱们让浏览器本身选择一个合适的偏移量，这样就能实现左右水平居中。

<style>
.box2{
      width: 75%;
      background-color: lime;
      margin:0 auto;
    }
</style>
 <div class="box2"> 
     一段用于演示的文字
 </div>

方式三：基于relative布局实现水平居中

咱们能够经过将一个元素设置为浮动元素，而后将其定位设置为relative，将其子元素的定位也设置为relative。而后将父元素的left值设置为50%，将其向右移动50%的距离，接着咱们给子元素设定left值为-50%使其向反向向移动自身位置的50%，这样一样能够实现居中效果。

<style>
  .box3 {
      float: left;
      position: relative;
      left: 50%;
    }

    .box4 {
      position: relative;
      left: -50%;
    }

</style>

<div class="box3">
    <div class="box4">
      一段用于演示的文字
    </div>
</div>

方式四：基于Flex实现水平居中（移动端首选）

基于flex实现水平居中很简单，只须要将justify-content属性设定为center便可。因为flex是一个响应式布局，是移动端跨端页面开发的首选，所以很是建议移动端开发的小伙伴以这种方式实现水平布局。

<div class="box5">
  一段用于演示的文字
</div>
  
.box5{
   display: flex;
   justify-content: center;
}

方式五：父元素开启相对定位，子元素开启绝对定位

咱们还能够经过给父元素开启相对定位，并给子元素开启绝对定位，来实现水平居中，具体实现方式以下：

<div class="box6">
  <div class="box7">
    一段用于演示的文字
  </div>
</div>
  
.box6{
  position: relative;
}
.box7{
  width: 80%;
  position: absolute;
  background-color: pink;
  left:0;
  right: 0;
  margin:0 auto;
}

垂直居中

方式一：单行文字实现水平居中

单行文字实现水平居中是咱们在前端页面开发中经常遇到的一种状况，这种状况比较特殊，这里咱们首先介绍。在一个块元素中，若是只有一行文字，咱们只需将line-height参数设置为与当前容器的高度一致便可，代码以下：

<div class="box1">
    一段用于演示的文字
</div>
<style>
.box1{
      height: 80px;
      line-height: 80px;
}
</style>

方式二：基于Flex实现垂直居中

基于flex实现垂直居中一样很简单的，只须要设置align-items:center便可，代码以下：

<div class="box1">
    <div class="boxinner1">
    </div>
  </div>
<style>
    .box1 {
      display: flex;
      width: 100%;
      height: 800px;
      background-color: lightskyblue;
      /* 设置元素垂直排列 */
      align-items: center;
    }

    .boxinner1 {
      height: 100px;
      width: 100px;
      background-color: gray;
    }
  </style>

方式三：基于Table布局模式

咱们能够将父元素的display属性设置为table，而后将子元素的display设置为table-cell,而后设置vertical-align:middle;来实现子元素的垂直布局。

<div class="outer">
    <div class="inner">
      一段用于演示的文字
  </div>
</div>
<style>
    .outer {
      width: 100%;
      height: 100px;
      display: table;
    }
    .inner {
      display: table-cell;
      vertical-align: middle;
    }
  </style>

这种垂直方向实现居中的缺陷在于父元素须要指定宽度。

方式四：absolute定位+transform

咱们能够将父元素的position属性设置为relative，而后将子元素的属性设置为absolute，子元素就会相对于父元素进行定位，而后咱们将子元素的top属性设置为50%，这时候子元素相对于父元素顶部的距离为父元素高度的50%，而后咱们还须要将元素自己向上移动自身高度的50%，咱们可使用transform实现。

<div class="outer">
    <div class="inner">
      一段用于演示的文字
    </div>
  </div>
  
<style>
    .outer {
      height: 100px;
      position: relative;
      background-color: lime;
    }
    .inner {
      position: absolute;
      top:50%;
      transform: translate(0,-50%) ;
    }
  </style>

实现水平垂直居中的方式有不少，每一个实现的方式都有本身的缺点或有点，好比咱们将元素设置为浮动时会遇到高度塌陷的问题，而使用flex布局则会在老的IE浏览器存在兼容性问题。所以咱们须要根据咱们的使用场景灵活选择，争取找到实现方式中的最优解！