首页 > 代码库 > 垂直居中

垂直居中

2024-08-28 06:36:10   217人阅读

不得不说，对于前端而言，垂直居中似乎成了一道迈不过去的坎，每一个前端基本上都踩过类似的坑，每一个前端博主的文章中似乎都有这么一篇关于垂直居中的文章。

我也不能免俗，就试试看自己能写出几种垂直居中的方案吧（完全css方案，不使用任何js配合）！

为了显示效果能更方便观察，首先清除整个浏览器的所有默认样式，简单起见，直接使用通配符清除。

*{
  margin: 0;
  padding: 0;
}

　　

1、应该属于最简单的一类，利用对内联标签设置行高的方式

<div class="center1">
    <p>
      垂直居中，似乎是每一个前端都面对过的比较棘手的问题。
    </p>
</div>

　　后面如果没有重写html标签，默认使用该结构，仅仅将div的class一句序号替换一下，以方便一一对应。

css样式：

.center1{
      width: 400px;
      height: 200px;
      background: pink;
      line-height: 200px;
      text-align: center;
      margin: 1em;
}
.center1 > p{
      width: 200px;
      display: inline-block;
      vertical-align: middle;
      line-height: 1.5;
      background: #ccc;
      text-align: left;
}

　　这里对内部标签p设置display:inline-block;使其在一定程度上具有内联标签的特性，对父元素div设置text-align:center;使其水平方向居中，line-height:200px;利用的是单行文本垂直居中的原理。

 

2、通过设置父元素的display:box盒模型

.center2{
      margin: 1em;
      width: 400px;
      height: 200px;
      background: pink;
      display: -webkit-box;
      -webkit-box-align: center;
      -webkit-box-pack: center;
}
.center5>p{
      width: 200px;
      background: #ccc;
}

　利用盒模型设置居中，box-align: center; 垂直居中， box-pack: center; 水平居中。

 

3、通过设置父元素的display:flex，就是我们常说的flex布局，在一定程度上这个方案应该会成为以后的主流方案。

.center3{
      margin: 1em;
      width: 300px;
      height: 200px;
      background: pink;
      display: flex;
      align-items: center;
      justify-content: center;
}

.center3>p{
      width: 200px;
      background: #ccc;
}

　　justify-content: center;定义了子元素在主轴方向上的居中对齐；align-items: center; 子元素在交叉轴方向上的居中对齐。

 

4、还是display的方案，模拟表格的居中对齐的方式

.center4{
      margin: 1em;
      width: 400px;
      background: pink;
      display: table;
}
.center4>p{
      background: #ccc;
      display: table-cell;
      vertical-align: middle;
}

　这种对齐方式就很像table布局的对齐方式，文本较长的时候水平居中会产生各种问题。

 

5、下面几个是通过使用定位，来达到垂直居中的目的的。

.center5{
      width: 400px;
      height: 200px;
      background: pink;
      position: relative;
      margin: 1em;
}
.center5>p{
      background: #ccc;
      position: absolute;
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 10%;    
}

　　可以达到子元素四边都距离父元素10%的距离。

6、已知子元素大小的情况下，可以通过margin的负值，达到刚刚好居中对齐的方式

.center6{
      width: 400px;
      height: 200px;
      background: pink;
      position: relative;
      margin: 1em;
}
.center6> p{
      width: 200px;
      height: 100px;
      background: #ccc;
      position: absolute;
      left: 50%;
      margin-left: -100px;
      top: 50%;
      margin-top: -50px;
}

　　通过绝对定位50%，然后margin负值自身的一半刚好达到居中的目的。

 

7、一个意向不到的属性，变形transform属性，这也应该成为一种主流方式。

.center7{
      width: 400px;
      height: 200px;
      background: pink;
      position: relative;
      margin: 1em;
}
.center7> p{
      background: #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

　　通过调整translate的值达到居中的目的。

就我个人而言，display:table的方式很少会用到，其他的视项目需求决定用哪种方式。我比较喜欢的是2、3、7三种方案。

　

垂直居中


联系
我们