css布局：如何实现垂直居中？

why_rookie 发布于2019-08-30 11:16 / 2041人阅读

摘要：需要注意的是使用的前提条件是内联元素以及值为的元素。子元素设置行内或行内块

css布局：如何实现垂直居中？

1.利用line-height实现居中，这种方法适合纯文字类的；








   css布局,实现垂直居中

2.通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中；








  css布局,实现垂直居中

3.弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中；

  
  



 
  
    css布局,实现垂直居中

4. 父级设置相对定位，子级设置绝对定位，并且通过位移transform实现；

  
  



  
  
    css布局,实现垂直居中

5. 父级设置弹性盒子，并设置弹性盒子相关属性；

6. 网格布局，父级通过转换成表格形式，然后子级设置行内或行内块实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

云服务器 GPU云服务器实现垂直居中垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114885.html

如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

hlcc 2019-08-02 11:43 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Meils 2019-08-23 12:20 评论0 收藏0