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

Posted 2021-09-14 不羁的风

在前端页面开发中，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浏览器存在兼容性问题。因此我们需要根据我们的使用场景灵活选择，争取找到实现方式中的最优解！