摘要:前言水平且垂直居中方法有哪些这在实际工作中经常用到,小记一下。以下结合水平居中强调实现垂直居中。子级元素是内联元素,父级元素设置属性垂直居中。
前言
水平且垂直居中方法有哪些?这在实际工作中经常用到,小记一下。
演示HTML结构基本思想i
一般的,水平居中相对垂直居中简单很多,对于内联元素(inline、inline-block、inline-table和inline-flex),父级元素设置text-align: center;;对于块级元素,子级元素设置margin: 0 auto;。以下结合水平居中强调实现垂直居中。
1、已知父级元素宽高,父级元素定位非 static ,子级元素定位设为 position: absolute/fixed ,再利用 margin 、 left 和 top 属性居中。#div1 { width: 200px; height: 200px; position: relative; background-color: #ffff00; } #div2 { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background-color: #ff00ff; }
注:需要已知父级元素固定宽高,才能确定 margin-left 和 margin-right 。
2、子级元素是内联元素,父级元素设置 line-height 属性垂直居中。#div1 { width: 200px; height: 200px; line-height: 120px; text-align: center; position: relative; background-color: #ffff00; } #div2 { width: 100px; height: 100px; line-height: normal; text-align: left; display: inline-block; background-color: #ff00ff; }
注:需要已知父级元素的固定高度,才可以确定line-height。
3、子级元素是内联元素,父级元素用 display: table-cell; 和 vertical-align: middle; 属性实现垂直居中。#div1 { width: 200px; height: 200px; display: table-cell; text-align: center; vertical-align: middle; background-color: #ffff00; } #div2 { width: 100px; height: 100px; display: inline-block; background-color: #ff00ff; }
注:无需要确定父级元素的宽高,inline-block 、 table-cell 不兼容ie67
看到还有一种方案,是借助伪元素 ::after 将容器撑高,实现内联元素垂直居中
#div1 { width: 200px; height: 200px; background-color: #ffff00; text-align: center; } #div1::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } #div2 { width: 100px; display: inline-block; background-color: #cccccc; vertical-align: middle; }
缺点:较难以理解,只适用于一个子级内联元素(有多个子元素不适用)
4、对于子级是块级元素,父级元素同样用 display: table-cell; 和 vertical-align: middle; 属性实现垂直居中,水平方向居中用 margin: 0 auto; 。#div1 { width: 200px; height: 200px; display: table-cell; vertical-align: middle; background-color: #ffff00; } #div2 { width: 100px; height: 100px; margin: 0 auto; background-color: #ff00ff; }
注:无需要确定父级元素的宽高,table-cell不兼容ie67
5、利用css3 translate 特性:位移是基于元素宽高的。#div1 { width: 200px; height: 200px; position: relative; background-color: #ffff00; } #div2 { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #ff00ff; }
注:无需要确定父级元素的宽高,translate属性兼容IE9+
6、当父级是浮动的,用 display: table-cell; 会失效,这时需要包三层,第一层 display: table;,第二层 display: table-cell; 第三次居中层#div1 { width: 200px; height: 200px; position: relative; display: table; background-color: #ffff00; float: left; } #div2 { width: 100%; height: 100%; display: table-cell; vertical-align: middle; /* text-align: center; */ background-color: #cccccc; } #div3 { width: 100px; height: 100px; margin: 0 auto; /* display: inline-block; */ background-color: #ff00ff; }
注:无需要确定父级元素的宽高,但HTML标签层数较多。
7、绝对定位加四边定位为0,margin 为 auto。#div1 { width: 200px; height: 200px; position: relative; background-color: #ffff00; } #div2 { width: 100px; height: 100px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; background-color: #cccccc; }
注:无需要确定父级元素的宽高,但把定位属性全用上了
8、利用flex布局 justify-content: center; 和 align-items: center; 属性居中。#div1 { width: 200px; height: 200px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #ffff00; } #div2 { width: 100px; height: 100px; background-color: #cccccc; }
注:无需要确定父级元素的宽高,兼容IE10+
9、利用grid布局,划分成3x3栅格,第二行第二列格子垂直水平居中#div1 { width: 200px; height: 200px; display: grid; background-color: #ffff00; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } #div2 { width: 100px; height: 100px; background-color: #cccccc; grid-row-start: 2; grid-column-start: 2; }
注:无需要确定父级元素的宽高,兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44
10、利用flex或grid布局结合 margin: auto;#div1 { width: 200px; height: 200px; display: flex; /* display: grid; */ } #div2 { width: 100px; height: 100px; margin: auto; }
注:此方法最简洁, 但是 flex/grid 存在兼容性问题
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115718.html
摘要:上下左右负伪元素父容器上设置用于设置为行内元素的水平居中居中元素自身设置用于设置为块级元素的水平居中元素宽度固定,且不能浮动绝对定位 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...
摘要:居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了。若把最后一行加上,即可同时实现水平和垂直居中。 博客原文地址:Claiyre的个人博客 https://claiyre.github.io/如需转载,请在文章开头注明原文地址不为繁华易匠心 从css入门就开始接触,无所不在的,一直备受争议的居中问题。css居中分为水平居中和垂直居中,水平居中方式也较为...
摘要:常见面试题实现垂直水平居中前言面试中常常被问到,如何使用来实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率还是比较高的,当然,在我们的生活中,也常常会有垂直水平居中的需求。 常见面试题—css实现垂直水平居中 前言 面试中常常被问到,如何使用css来实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率还是比较高的,当然,在我们的生活中,也常常...
摘要:如果里有多行,那么就把每一行的行高加起来算。姓名怎么和联系方式对齐其他的方法直接用可以的,不过会受到字体的影响。字体一变,加的就会变。代码解释代码如果是内联元素要被改变宽度的话,一定要先写上。 css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 ...
阅读 967·2023-04-26 02:21
阅读 2715·2021-09-24 09:47
阅读 1534·2019-08-30 15:55
阅读 2095·2019-08-30 14:01
阅读 2257·2019-08-29 14:01
阅读 1950·2019-08-29 12:46
阅读 762·2019-08-26 13:27
阅读 1852·2019-08-26 12:23