内容简介:老生常谈,水平垂直居中。为什么大家都爱水平垂直居中呢?根据如上结构,通过css实现水平垂直居中。利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高,使用数值或者百分比的方式进行定位。
老生常谈,水平垂直居中。为什么大家都爱水平垂直居中呢?
基本HTML
<div class="father"> <div class="child"> </div> </div>
根据如上结构,通过css实现水平垂直居中。
绝对定位
利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高,使用数值或者百分比的方式进行定位。
方法1
.father { width: 100px; height: 100px; background-color: grey; position: relative; } .child { width: 50px; height: 20px; background-color: red; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
通过设置四向为0和 margin: auto
实现。
方法2
.father { width: 100px; height: 100px; background-color: grey; position: relative; } .child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; margin: -10px -25px; }
通过设置 left
和 top
使child左上角位置移动到中间,然后再移动自身宽高一般使child中心至中间。
方法3
.father { width: 100px; height: 100px; background-color: grey; position: relative; } .child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
方法4
.father { width: 100px; height: 100px; background-color: grey; position: relative; } .child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-25px, -10px); }
总结
这几种方法使用了绝对定位,margin或者transform来使子元素水平垂直居中,根据是否知道具体宽高来使用margin或者transform。
弹性盒子
方法5
.father { width: 100px; height: 100px; background-color: grey; display: flex; } .child { width: 50px; height: 20px; background-color: red; margin: auto; }
方法6
.father { width: 100px; height: 100px; background-color: grey; display: flex; justify-content: center; align-items:center; } .child { width: 50px; height: 20px; background-color: red; }
总结
这两种使用了flex弹性盒子布局来实现,随着浏览器兼容性的普及,弹性盒子也越来流行了。
table-cell
方法7
.father { width: 100px; height: 100px; background-color: grey; display: table-cell; text-align:center; vertical-align: middle; } .child { display:inline-block; width:50px; height:20px; background-color: red; }
使用了table-cell以及行内块元素来实现
行内元素
方法8
.father { width: 100px; height: 100px; background-color: grey; text-align:center; } .child { display:inline-block; width:50px; height:20px; background-color: red; vertical-align: middle; } .father:after{ content:''; width:0; height: 100%; display: inline-block; vertical-align: middle; }
利用伪元素撑开高度垂直居中。
方法9
.father { width: 100px; line-height: 100px; background-color: grey; text-align: center; } .child { display: inline-block; width: 50px; height: 20px; background-color: red; vertical-align: middle; }
利用父元素 line-height
与inline-block子元素 vertical-align
垂直居中
相对定位
方法10
是不是有点疑惑为啥1、2、3都要用 absolute
来定位,用 relative
不行吗?
答案是可以的。:joy:
.father { width: 100px; height: 100px; background-color: grey; } .child { width: 50px; height: 20px; background-color: red; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); }
方法11
.father { width: 100px; height: 100px; background-color: grey; } .child { width: 50px; height: 20px; background-color: red; position: relative; left: 50%; top: 50%; transform: translate(-25px, -10px); }
总结
其实要想水还很再水出方法12、方法13等等,但是主要问题并不在这里,我觉得大家都喜欢问垂直居中问题的主要目的,还是想考验大家对基础css的了解,定位、布局、元素等,比如说相对布局和绝对布局,比如说块级元素和行内元素,比如说margin和padding,比如说百分比的参照者,比如说伪元素的运用,比如说transform用法等等。
最主要考察的是对这些基础实际运用能力和理解能力,并不是说面试官真的想知道你了解多少种垂直居中的方法,他只是想了解一下面试者css的基础罢了。
随手一个方法12
.father { width: 100px; height: 100px; background-color: grey; } .child { width: 50px; height: 20px; background-color: red; margin: auto; } .father:before { content: ""; width: 0; height: calc(50% - 10px); display: block; vertical-align: middle; }
以上所述就是小编给大家介绍的《在我水了11种水平垂直居中方法之后,我终于明白了》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图片转BASE64编码
在线图片转Base64编码工具
XML 在线格式化
在线 XML 格式化压缩工具