关于html5: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浏览器存在兼容性问题。因而咱们须要依据咱们的应用场景灵便抉择，争取找到实现形式中的最优解！