江苏龙网

  1. 首页 > 人文 > >

css方法实现垂直居中的常用方法（布局常用）

前一段时间有个同学去面试 ， 被面试官提问到了实现垂直居中的方法 ， 同学当时问蒙了 ， 就说出2个 ， 今天就利用空暇时间总结下
第一种方法对单行元素进行垂直居中
1、可设置该行内元素的父元素的height与line-heigth的值相等 ， 让行内元素垂直居中
案例如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
这个是最简单的一种方式 ， 就是设置行高 ， 让文字在块元素的高度相等 ， 然后保持垂直居中状态
2、针对行内元素 ， 可通过设置vertical-align: middle;以及line-height进行垂直居中
代码如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
第二种方法对文本进行垂直居中
1、针对文本 ， 通过display:flex;配合align-items和justify-content实现文本居中
案例如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
第三种方法对已知高度块级元素进行垂直居中
1、绝对定位 ， 配合top:50%和负margin-top(元素高度一半)进行垂直居中
案例如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
2、绝对定位 ， 配合top:0;bottom:0;和margin:auto进行垂直居中
案例如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
3、设置position:absolute;和calc()函数实现垂直居中
代码如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
4、使用浮动float实现元素垂直居中
案例如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
第四种方法对未知高度块级元素进行垂直居中
1、设置position：absolute；和transform:traslate(x,y)实现水平垂直居中
代码如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
效果如下：
css方法实现垂直居中的常用方法（布局常用）文章插图
【css方法实现垂直居中的常用方法（布局常用）】2、通过display:table-cell和vertical-align:middle;实现垂直居中
代码如下：
css方法实现垂直居中的常用方法（布局常用）文章插图


推荐阅读


上一篇：为什么编程应遵循“30行”原则

下一篇：第一次用泡脚桶是啥感觉？小米有品HITH智能足浴器Q3评测