在我水了11种水平垂直居中方法之后,我终于明白了

栏目: CSS · 发布时间: 5年前

内容简介:老生常谈,水平垂直居中。为什么大家都爱水平垂直居中呢?根据如上结构,通过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;
}

通过设置 lefttop 使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种水平垂直居中方法之后,我终于明白了》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

机器学习

机器学习

(美)Tom Mitchell / 曾华军、张银奎、等 / 机械工业出版社 / 2008-3 / 35.00元

《机器学习》展示了机器学习中核心的算法和理论,并阐明了算法的运行过程。《机器学习》综合了许多的研究成果,例如统计学、人工智能、哲学、信息论、生物学、认知科学、计算复杂性和控制论等,并以此来理解问题的背景、算法和其中的隐含假定。《机器学习》可作为计算机专业 本科生、研究生教材,也可作为相关领域研究人员、教师的参考书。一起来看看 《机器学习》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具