浅谈垂直居中

最新推荐文章于 2021-11-06 10:45:09 发布

joy_zxj

最新推荐文章于 2021-11-06 10:45:09 发布

阅读量330

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/zhoujie_zhoujie/article/details/64918843

版权

学习笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

垂直居中一直是布局问题当中让人比较头疼的问题，每次遇到这类问题都是把脑子里考虑到的可能的解决方案一个个的试，自己本身也没有什么比较清晰的解决思路，今天就利用这篇文章好好总结一下。

method1:利用绝对定位(1)

第一个想说的方法是我们最常用的，利用绝对定位进行水平垂直居中。就像下面这样：
https://jsbin.com/mahuveqaya/edit?html,css,output

//css
#content{
  background-color:yellow;
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
}
//html
<body>
  <div id="content">hello Joy</div>
</body>

缺点：这个方法要求我们必须知道居中元素的高度。

method2:利用绝对定位(2)

由上面这个这个方法，我们可以思考一下，我们为什么一定要知道居中元素的长宽才可以？因为我们要取到元素的50%长宽。

那有没有一种方法可以让我们以百分比的形式取到元素的长宽呢？

我们知道，利用margin是办不到的，因为margin是相对于父元素的宽度取的。
聪明的程序员们想到了transform的translate，在translate设置移动的距离是，正是相对于自身的宽度进行设定的。于是，有了下面这样的方法：
https://jsbin.com/mahuveqaya/edit?html,css,output

//css
#content{
  display:flex;
  min-height:200px;
  background-color:yellow;
}
span{
  margin:auto;
}
//html
<body>
  <div id="content"><span>hello Joy</span></div>
</body>

厉害了有木有！！
这个方法的好处就是我们不用指定元素的高度，用起来感觉非常棒。

method3:利用vh

假如我们不想使用绝对定位，那有什么办法可以实现垂直居中呢？

首先我们要做的还是要想办法让元素的左上角位于容器的正中心。

想到利用margin:50% auto 0;进行设置的同学请冷静的仔细再想想，margin的大小都是相对于父与元素的宽度设定的，包括margin-top，
所以这个方法是不可行的。

那有什么办法可以取到容器的50%宽高呢？

我们想到了vh,vw，这两个单位是相对于视口大小取的，1vh=1%视口高度。于是我们有了下面这个方法：
https://jsbin.com/mahuveqaya/4/edit?html,css,output

但这个方法的局限性在于：只能相对于视口居中。

method4:利用table

这个方法我们也经常用，利用表格的显示模式。
https://jsbin.com/mahuveqaya/5/edit?html,css,output

//css
#content{
  background-color:yellow;
  vertical-align: middle;
  display:table-cell;
  width:200px;
  height:200px;
  text-align:center;
}

//html
<body>
  <div id="content">hello Joy</div>
</body>

method5:利用flex-box(1)

flexbox真的非常的强大，用来解决垂直居中的问题非常方便。

弹性盒子里，我们可以直接用margin:auto设置水平垂直居中，不需要指定任何宽度，因为居中的元素分配到的宽度max-content，这个属性取到的是最大的内容宽度，使我们元素的宽度取到了一个固定值。

https://jsbin.com/mahuveqaya/8/edit?html,css,output

//css
#content{
  display:flex;
  min-height:200px;
  background-color:yellow;
}
span{
  margin:auto;
}
//html
<body>
  <div id="content"><span>hello Joy</span></div>
</body>

method6:利用flex-box(2)

弹性盒子中，除了上面的办法，当然还可以利用justify-content，和align-items进行水平垂直居中。
https://jsbin.com/mahuveqaya/6/edit?html,css,output

//css
#content{
  background-color:yellow;
  vertical-align: middle;
  display:flex;
  width:200px;
  height:200px;
  justify-content:center;
  align-items:center;
}
//html
<body>
  <div id="content">hello Joy</div>
</body>