CSS垂直居中的10种实现姿势
前言
前端开发中元素居中是最常见和最经常使用到的css技巧,不仅开发中经常会用到,面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。
1、line-height+height实现
如果子元素是行内文本元素的话,只要设置父元素的height和line-height高度一样就可以垂直居中。
HTML
<div class="parent"> <span class="child">我是行内元素</span> </div>
CSS
.parent { height: 200px; width: 200px; line-height: 200px; background: #fcc; } .child { background: #f66; }
效果图:
2、flex+align-items实现
flex布局可以实现一行或多行元素垂直居中,使用align-items:center
就可以。
HTML
<div class="parent"> <div class="child">flex实现居中</div> </div>
CSS
.parent { height: 200px; width: 200px; display: flex; align-items: center; background: #fcc; } .child { background: #f66; width: 180px; }
效果图:
3、table-cell+vertical-align实现
利用表布局的vertical-align: middle
属性可以实现子元素的垂直居中。
HTML
<div class="parent"> <div class="child">使用表格垂直居中</div> </div>
CSS
.parent { height: 200px; width: 200px; display: table; } .child { background: #f66; vertical-align: middle; display: table-cell; }
效果图:
4、absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%
,并设置margin-top
向上偏移元素高度的一半,就可以实现居中。
HTML
<div class="parent"> <div class="child">absolute+负margin</div> </div>
CSS
.parent { height: 200px; width: 200px; position: relative; background: #fcc; } .child { background: #f66; height: 50px; position: absolute; top: 50%; margin-top: -25px; width: 180px; }
效果图:
5、absolute+transform(已知高度宽度)
当垂直居中的元素的高度和宽度未知时,可以借助CSS3
中的transform
属性向Y
轴反向偏移50%
的方法实现垂直居中。但存在兼容性问题。
HTML
<div class="parent"> <div class="child">absolute+transform</div> </div>
CSS
.parent { height: 200px; width: 200px; position: relative; background: #fcc; } .child { background: #f66; position: absolute; top: 50%; transform: translateY(-50%); width: 180px; }
效果图:
6、absolute + calc实现
这种方式也要求居中元素的宽高必须固定,使用css3的ca’lc计算属性,top的百分比是基于元素的左上角,那么用top百分比在减去宽度的一半就可以垂直居中。
HTML
<div class="parent"> <div class="child">absolute + calc</div> </div>
CSS
.parent { height: 200px; width: 200px; position: relative; background: #fcc; } .child { background: #f66; height: 50px; width: 180px; position: absolute; top: calc(50% - 25px); width: 180px; }
效果图:
7、absolute+margin: auto实现
通过绝对定位,然后设置top:0
、bottom:0
、margin:auto
实现居中。
HTML
<div class="parent"> <div class="child">absolute + margin: auto</div> </div>
CSS
.parent { height: 200px; width: 200px; position: relative; background: #fcc; } .child { background: #f66; height: 50px; width: 180px; position: absolute; top: 0; margin: auto; bottom: 0; }
效果图:
8、padding实现
通过设置父元素padding
来实现。
HTML
<div class="parent"> <div class="child">padding实现</div> </div>
CSS
.parent { width: 200px; padding: 80px 0; background: #fcc; } .child { background: #f66; height: 80px; width: 180px; line-height: 80px; }
效果图:
9、flex+flex-direction实现
这种方式也是首先给父元素设置 display:flex
,然后改变主轴的方向 flex-direction: column
,最后通过justify-content:center
实现垂直居中。
HTML
<div class="parent"> <div class="child">flex+flex-direction实现</div> </div>
CSS
.parent { width: 200px; height: 200px; display: flex; flex-direction: column; justify-content: center; background: #fcc; } .child { background: #f66; height: 80px; width: 180px; line-height: 80px; }
效果图:
10、Grid实现
HTML
<div class="parent"> <div class="child1"></div> <div class="child">Grid实现</div> <div class="child1"></div> </div>
CSS
.parent { width: 200px; height: 200px; display: grid; background: #fcc; } .child { background: #f66; } .child1 { background: #fcc; }
效果图:
最后
如果喜欢的话,欢迎收藏关注。
更多优质文章可以访问GitHub博客,欢迎帅哥美女前来Star!!!
参考文章
原文地址:https://segmentfault.com/a/1190000021262127
相关推荐
-
Linux常用文本处理命令 服务器
2019-3-14
-
MySQL 一对多查询 服务器
2019-3-15
-
在 Intel NUC 上安装 Linux 服务器
2020-5-25
-
centos 7 mysql 开启binlog 服务器
2019-6-26
-
使用filebrowser来管理你的文件 服务器
2019-8-29
-
VGG卷积神经网络模型解析 服务器
2019-9-10
-
配置高可用的Hadoop平台 服务器
2019-3-14
-
容器进化史 服务器
2019-7-2
-
Hadoop完全分布式集群搭建 服务器
2020-6-22
-
systemctl 设置自定义服务管理(以nginx为例) 服务器
2019-3-14