浅析水平垂直居中(CSS)

浅析水平垂直居中

目录

• 浅析水平垂直居中
• 1.利用定位实现水平垂直居中
• 2.利用定位和外边距margin实现水平垂直居中
• 3.利用定位加平移实现水平垂直居中
• 4.利用表格属性实现水平垂直居中
• 5.利用vertical-align属性实现水平垂直居中
• 6.利用vertical-align属性实现水平垂直居中（2）
• 7.弹性盒实现水平垂直居中
• 8.网格布局grid布局实现水平垂直居中（gird网格布局还未发展完善，兼容性差。）

咱们在平常网页编辑中，能够很简单的实现元素水平居中，可是难以作到元素水平垂直居中，本文简单的介绍了几种经常使用的水平居中方法。

1.利用定位实现水平垂直居中

实现原理：父元素给上相对定位做为参照物，子元素给绝对定位，定位在父元素的中心位置。

html代码以下：

<div class="a">

    <div class="a1"></div>

</div>

css代码以下：

.a{

 width: 300px;

 height: 200px;

 background-color:#ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .a1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 0;

 right: 0;

 top: 0;

 bottom: 0;

 margin: auto;

 }

从上面代码能够看出，咱们可使用绝对定位上下左右0加上margin：auto，实现元素的水平垂直居中。

2.利用定位和外边距margin实现水平垂直居中

实现原理：相似于第一种定位方法，结合margin属性，將属性值设为负值，实现效果。

html代码以下：

<div class="b">

        <div class="b1"></div>

 </div>

css代码以下：

.b{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .b1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-left: -50px;

 margin-top: -50px;

 }

从上面代码能够看出，因为定位实现的是元素左上角点的水平垂直居中，并不能实现咱们想要的效果，因而咱们利用margin负值將元素移上去，这里注意元素中心点至关于占宽高各一半因此咱们margin属性必定要设置子元素（就是要水平垂直居中的元素）的宽（对应margin-left值）高（对应margin-top值）各一半。

3.利用定位加平移实现水平垂直居中

实现原理：与方法2核心原理相同可是采用translate平移实现效果。

html代码以下：

<div class="c">

        <div class="c1"></div>

 </div>

css代码以下：

.c{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .c1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 50%;

 top: 50%;

 transform:translate(-50%,-50%)

 }

原理与方法2相同，只是margin换成了translate平移属性。

4.利用表格属性实现水平垂直居中

实现原理;父元素转化为表格，而后给子元素套上一个盒子，將这个盒子转化为单元格，最后实现效果。（咱们能够知道在表格属性中，通常单元格内内容都是垂直居中的，咱们正是利用这一原理实现效果）

html代码以下：

<div class="d">

        <div class="box">

                <div class="d1"></div>

    ​ </div>

​ </div>

css代码以下：

.d{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 /* 父元素转化为表格 */

 display: table;

 }

 .box{

 /* 转化为单元格td */

 display: table-cell;

 vertical-align: middle;

 }

 .d1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 margin: auto;

 }

此方法的缺点就是须要多套一个盒子，不能保证结构的简洁性。

5.利用vertical-align属性实现水平垂直居中

实现原理：利用vertical-align属性实现垂直居中效果，再实现水平居中。

html代码以下：

<div class="e">

        <div class="e1"></div>

​ </div>

​

css代码以下：

.e{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 /* 缺点：行高必须固定 */

 line-height: 200px;

 font-size: 0;

 text-align: center;

 }

 .e1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 display: inline-block;

 vertical-align: middle;

 }

此方法的缺点的父元素的行高必须肯定，否则难以实现。同时注意vertical-align必须与display: inline-block;同时使用，否则不会生效。

6.利用vertical-align属性实现水平垂直居中（2）

实现原理：对上一种方法的优化，添加一个辅助盒子占父元素的所有高（宽度为0）并隐藏，解决父元素行高必须肯定的问题。

html代码以下：

<div class="f">
      <!-- 做为参照的假盒子 -->
         <div class="f0"></div>
        <div class="f1"></div>

</div>

​

css代码以下：

.f{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 text-align: center;

 }

 .f0{

 width: 0;

 height: 100%;

 display: inline-block;

 vertical-align: middle;

 }

 .f1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 display: inline-block;

 vertical-align: middle;

 }

7.弹性盒实现水平垂直居中

实现原理：定义父元素为弹性盒子，而后对子元素进行水平垂直居中处理

html代码以下：

<div class="g">

        <div class="g1"></div>

​ </div>

​

css代码以下：

.g{

 width: 300px;

 height: 200px;

 background-color: background-color: #ff0;

 float: left;

 margin: 20px;

 display: flex;

 align-items: center;

 justify-content: center;

 }

 .g1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 }

若不考虑兼容问题，此方法是最简单的水平垂直居中方法，三行代码实现效果。

8.网格布局grid布局实现水平垂直居中（gird网格布局还未发展完善，兼容性差。）

实现原理：核心原理与弹性盒实现原理相同，可是兼容性比Flex弹性盒布局差，目前尽可能少用。

html代码以下：

<div class="h">
      <div class="h1"></div>
</div>

css代码以下：

.h{
        width: 300px;
     
        height: 200px;
 
        background-color: background-color: #ff0;
 
        float: left;
 
        margin: 20px;
 
        display: grid;
 
        /* 垂直居中两种属性均可实现 */
 
        /* align-items: center; */
 
        align-content: center;
 
        justify-content: center;
    }
 
    .h1{
        width: 100px;
 
        height: 100px;
 
        background-color: #ff0;
    }

​