• 欢迎访问duantianhen的网站,主要总结PHP、Go、服务器、前端、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站

前端实现垂直居中方法汇总

前端 admin 11个月前 (05-08) 304次浏览 已收录 0个评论

转 CSDN — RunningSnail  — 实现垂直居中的几种方式

方式一:单行文本垂直居中

其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可,也就是将line-height和height设置为同样的数值。
当然也有道友说其实这个地方设置height值其实完全没有必要,容器会根据line-height自动撑开。这个理论实际上是正确的,他的正确的前提在于该元素内只有文本节点。
但是如果父级元素不设置高度,子元素设置了高度,这个时候就不能垂直居中了,因为父级元素的高度和子元素的高度+margin值 一样了。因此为了保险建议还是设置height和line-height相同,来实现单行文本的居中。

[html] view plain copy

  1. <span style=“font-size:14px;”><div style=“height:200px;line-height:200px;”>
  2.     我是垂直居中的
  3. </div></span>

 

方式二:利用vertical-align垂直居中

很多人说vertical-align不好用,使用了这个样式,达不到居中的效果。其实写这个文章之前我也是这么认为的,但是看了vertical-align的说明后,才发现是自己用错了。在w3c上面,vertical-align是这样解释的:
“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”
根据这个话,做垂直居中其实可以这样玩:

(1)、设置父级元素为table-cell

通过设置父级元素为display:table-cell以及vertical-align:middle,这样就可以使子元素垂直居中了。这里呢和table里面的垂直居中类似。
注意:设置为display:table-cell的元素,千万不能使用浮动或者定位,否则会丧失table-cell元素的垂直居中的功能。因为浮动和定位是块级元素专有的。如果实在要使用浮动或者定位,可以再外面套一层div,在这个div上面使用浮动或者定位。

[html] view plain copy

  1. <div style=“height:200px;display:table-cell;vertical-align:middle;”>
  2.     <div>我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本</div>
  3. </div>

(2)、如果子元素是图片

vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的,且各个字体的字符X的高低位置不一致。所以,当字体大小较大时,这种差异就更明显。当font-size为0时,相当于把字符X的字体大小设置为0,于是可以实现完全的垂直居中。

[html] view plain copy

  1. <div style=“height:200px;font-size:0px;line-height:200px;”>
  2.     <img style=“vertical-middle:middle;” src=http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif&#8221; width=“50%” alt=“test”>
  3. </div>

 

(3)、通过新增元素来实现垂直居中

可以将新增的元素高度设置的和父级元素一样高,宽度为0,并且同样设置vertical-middle:middle以及display:inline-block;
由于两个元素之间的空白会被解析,因此需要在父级设置font-size:0px;在子级又将font-size设置回来。

[css] view plain copy

  1. <style>
  2.    .parent{
  3.    height:300px;
  4.    font-size:0px;
  5.    }
  6.    .child{
  7.    font-size:14px;
  8.    display:inline-block;
  9.    vertical-align:middle;
  10.    }
  11.    .childAdd{
  12.     display:inline-block;
  13.     vertical-align:middle;
  14.     height:100%;
  15.     width:0px;
  16.    }
  17.    </style>

 

[html] view plain copy

  1. <div class=“parent”>
  2.     <div class=“child”>
  3.     我是垂直居中的,多点字可以变成多行文本我是垂直居中的
  4.     </div>
  5.     <lable class=“childAdd”></label>
  6. </div>

如果对文档结构要求比较严格,其实我们也可以利用:after来实现。

[css] view plain copy

  1. <style>
  2. #parent3{
  3.             backgroundred;
  4.             height:300px;
  5.             font-size:0px;
  6.         }
  7.         #parent3:after{
  8.             content:“”;
  9.             display:inline-block;
  10.             height:100%;
  11.             vertical-alignmiddle;
  12.         }
  13.         #parent3>div{
  14.             font-size:1rem;
  15.             vertical-align:middle;
  16.             display: inline-block;
  17.         }
  18. </style>

 

[html] view plain copy

  1. <div id=“parent3”>
  2.     <div>我就是想垂直居中而已我就是想垂直居中而已我就</div>
  3. </div>

 

方式三:通过绝对定位来实现垂直居中

配合translate()位移函数。translate样式的百分比是相对于自身高度的。而top的百分比是相对于父级元素的高度的。因此可以利用这个特性来实现垂直居中。

[css] view plain copy

  1. <style>
  2. .parent{
  3.   position:relative;
  4. }
  5. .child{
  6.   positionabsolute;
  7.   top: 50%;
  8.   transform: translateY(-50%);
  9. }
  10. </style>
[html] view plain copy

  1. <div class=“parent” style=“height:100px;”>
  2.   <div class=“child”>测试文字</div>
  3. </div>

那么同样的道理,如果要求body的子元素垂直居中,也可以使用margin来实现。

[css] view plain copy

  1. <style>
  2. .child{
  3.     margin-top:50vh;
  4.     transform:translateY(-50%);
  5. }
  6. </style>

 

[html] view plain copy

  1. <body>
  2.   <div class=“child”>测试文字</div>
  3. </body>

方式四:使用弹性盒模型flex实现垂直居中

(1)、在伸缩容器上设置侧轴对齐方式align-items: center

[css] view plain copy

  1. <style>
  2. .parent{
  3.   display: flex;
  4.   align-items: center;
  5. }
  6. </style>

 

[html] view plain copy

  1. <div class=“parent” style=“background-color: gray; height: 100px;”>
  2.     <div class=“child” style=“background-color: lightblue;”>测试文字</div>
  3. </div>


(2)、在伸缩项目上设置margin: auto 0

[css] view plain copy

  1. <style>
  2. .parent{
  3.   display: flex;
  4. }
  5. .child{
  6.   marginauto 0;
  7. }
  8. </style>

 

[html] view plain copy

  1. <div class=“parent” style=“background-color: gray; height: 100px;”>
  2.     <div class=“child” style=“background-color: lightblue;”>测试文字</div>
  3. </div>

本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:前端实现垂直居中方法汇总
喜欢 (0)

您必须 登录 才能发表评论!