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

levius 发布于2019-08-29 18:40 / 820人阅读

摘要：老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢基本根据如上结构，通过实现水平垂直居中。绝对定位利用父元素相对定位和子元素绝对定位进行水平垂直居中。

老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢？

基本HTML

根据如上结构，通过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不行吗？

答案是可以的。

混合云私有云水平垂直居中我明白了我终于不要在我离开之前离开

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114491.html

使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Taste 2019-08-30 14:13 评论0 收藏0
CSS的居中方式

摘要：这样一来外部容器正好可以将内容垂直的包裹住并且由于外部容器是浮动的所以容器的宽度和内层的宽度一致这样可以做到完全自适应的实现居中。刚学习CSS的时候尝试过几种居中的方法,这些方法不需要借助JS手段,所写的方法有一个原则,就是在不需要直接人为的设定好宽高计算后再实现居中,还有诸如table布局啊、行高设定、margin：auto之类的我就不写了。以下几种方法针对不同的浏览器,经过测...

lushan 2019-08-29 12:28 评论0 收藏0
不定元素宽高用css实现内容水平和垂直都居中

摘要：在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中，也是同样的道理垂直居中。在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。而且我们希望不要涉及宽度和高度，也就是说，我们不...

Chao 2019-08-30 15:52 评论0 收藏0