23种实现div垂直居中的方法汇总

本篇文章给大家谈谈23种实现div垂直居中的方法汇总，以及对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

当宽度固定时

1、absolute + margin 负值

绝对定位。在这个例子中，top:50%会被设置为抓取50%的空间高度，然后居中元素的margin-top会被设置为高度的负一半，这样元素就可以居中了。这个方法比较常见

2.absolute + margin auto

另一种绝对定位垂直居中解决方案。这个方法有点特别。当元素设置为绝对定位时，假设它无法捕获整体可用空间范围，因此margin:auto 会失败。但是当你设置它top:0;bottom:0;时，绝对定位的元素已经捕获了可用空间。这时候你的margin:auto就生效了（神奇）。如果你的绝对定位元素需要在父层水平居中，也可以设置left:0;right:0;让绝对定位的元素获得可用空间，然后将margin-left和margin-right设置为auto使其居中。但这种方法的缺点是您的定位元素必须具有固定的宽度和高度（百分比也很重要）才能正确居中。

当不需要固定宽度时

3、absolute + translate

我们在绝对定位中使用top和right分别将元素的顶部和左侧设置为50%，然后使用translate(-50%,-50%)将中间元素定位到元素的50%它自己的宽度和高度。 % 可以达到居中的目的（困惑点：这个在移动ios【微信公众号平台】中效果不好）

4、Flex + align-items

设置父层display:flex，设置次轴（横轴）属性align-items:center。这种方法的优点是该层无需设置高度即可自动居中。

我经常使用

5、Flex + :before + flex-grow

这种方法。 Flex 有多种方法来集中数据。可以利用Flex-grow的扩展特性来实现。在这个例子中，Amos使用flex-direction:列直排，而：before伪元素使用flex-grow拉伸值可以获得所有剩余空间的特征。将其设置为剩余空间的一半可以将内容数据精确地推送到垂直中间位置，这是传统技术的延伸。

6、Flex + margin

继续使用Flex 进行居中。由于Flex元素在解释空间上的特殊性，我们只需要在父元素上设置display:flex，然后在需要垂直居中的元素上设置margin:auto，它就会自动居中。

7，Flex + align-self

对于flex次轴交叉轴的单独对齐，可以通过在单个子层元素上设置align-self:center来实现垂直居中。

8、

网格+模板（

网格布局

）它将网页划分为网格，不同的网格可以任意组合，做出各种布局。以前只能通过复杂的CSS 框架才能实现的效果现在已内置到浏览器中。

9，Grid + align-items

align-items 属性设置单元格内容的垂直位置（顶部、中间、底部）。 align-items 不仅在Flex 中可用，在CSS Grid 中也可用。然而，在Flex 中，align-items 是针对辅助轴交叉轴对齐的，而在CSS Grid 中，它是针对Y 轴对齐的。

10、Grid + align-content

CSS Grid 的align-content 和Flex 的align-content 之间存在一些差异。 CSS Grid 对空间的解释与Flex 略有不同，因此align-content 只能作用于Flex 中的多行元素。但在Grid中就不存在这样的问题，所以我们可以愉快地使用align-content来垂直居中子元素。

11，Grid + align-self

基本上是网格Y轴的单独对齐方法。单个子层元素只要设置align-self:center，就可以实现垂直居中

12、Grid + place-items

不知道有多少人用过place-items属性。该属性是align-items 和justify-items 的缩写。简单来说，就是水平和垂直对齐。当然，设置center就可以居中了。

13、

有多少人使用过Grid + place-contentplace-content 属性？该属性是align-content和justify-content的缩写。简单来说，就是水平和垂直对齐。当然，设置center就可以居中了。

14，Grid + margin

继续使用网格居中。由于Grid元素在解释空间上的特殊性，我们只需要在父元素上设置display:grid，然后在需要垂直居中的元素上设置margin:auto即可自动居中。

15.Display：table-cell

display属性将div设置为表格的单元格，这样就可以利用支持存储单元格对齐的vertical-align属性使信息垂直居中（这个方法是在冉叶教育公司学习的，参考后面-端人员写法）

文字与行业居中技巧

16、Line-height

最常用于单行文本应用程序，例如按钮、下拉框和导航元素。该方法的原理是，设置单行文本的行高后，文本将位于行高的垂直中间。利用这个原理，就可以轻松实现垂直居中的要求。

17、Line-height + inline-block

多行文本居中

18、:before + inline-block

:before具有inline-block属性的伪类元素的写法应该是一种非常传统的垂直居中技术。这种方法的优点是子元素可以居中，不需要设置特殊的高度。我们将使用：before伪类元素设置100%高的inline-block，然后将需要居中的子元素设置为inline-block属性，那么就可以使用vertical-align:middle来达到垂直居中的目的。这个方法在过去其实是非常好的。垂直居中方案只需要处理inline-block元素之间4-5px间距的小缺陷，但也非常实用。

19. Flex + 内容对齐

一般情况下，align-content只能使多行flex项在次轴上居中，但是当我不确定今天有多少个子层元素，并且有时可能出现单一的情况时，这个技术就可以使用（当然你也可以有其他解决方案）。由于它只能与多行子元素一起使用，因此我们将另外两个兄弟添加到单个子组件中。使用：before和：after将子元素增加为多个，以便使用flex的align-content属性居中

20、calc

Cale是计算机英文单词calculator的缩写。微软提出的这个CSS方法，从此我们再也不用绞尽脑汁进行数学计算，或者想方设法用js来动态计算，我们可以轻松地使用calc() 方法来计算出所需的实际高度及时、动态地确定百分比。这确实是一个划时代的方法。不过这种方法需要注意的一点是，如果大量使用的话，网页的性能会比较差。所以请谨慎使用。

21，Relative + translateY

这个技术使用top:50%技巧在你的元素上方创建一个固定的百分比距离，然后让要居中的元素本身使用tanslateY的百分比来达到垂直居中的要求。 translate是一个很棒的属性，因为translate的百分比单位使用元素自身的大小作为100%，这使得我们使用元素自身的宽度和高度来做事情变得更加方便。

22、padding

23、Write-mode

这种方法应该比较少用。这个想法是受到我的老朋友保罗的启发。 write-mode CSS属性的作用基本上是垂直居中无法比拟的。 Amos的目的是将书写方向从水平改为垂直，从很早的IE5就开始支持它，但当时很少使用Amos。首先，大多数网页都是水平书写的。另外，当时除了IE浏览器之外，想不到其他浏览器的支持都不是很好，所以很少使用。

使用write-mode将整个文本容器变成直文本，然后使用text-align:center来达到这个容器垂直居中的目的。通俗的解释就是，你把原来的横排文本变成了竖排文本，那么原来横排文本行中使用的水平对齐方式就变成了控制竖排中间的对齐方式。原理就是这么简单。但要特别注意浏览器对这种语法的支持。需要单独写。否则，某些浏览器的语法不同，这可能会使您的网页在某些浏览器上看起来无效。这将是最需要注意的事情

文章最后：暂时只能想到这么多。其实就那么几类，边距网格布局、弹性布局flex、文本布局line-height以及一些不常见的优点calc、write-mode。这23点只是分成了，欢迎其他朋友补充，期待在技术交流平台上看到其他更好的补充。