乐趣区

关于html5:HTML元素水平垂直居中实现方式每天一个知识点

jiezi

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

退出移动版