今天小编跟大家讲解下有关CSS 不定宽高的垂直水平居中方式总汇 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 不定宽高的垂直水平居中方式总汇 的相关资料，希望小伙伴们看了有所帮助。
垂直居中，在 css 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。
有常见的 flex、transform、absolute 等等。也有 css3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。
1、flex大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。
<div class="wrapper flex-center"> <p>horizontal and vertical</p></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc;}.flex-center { display: flex; justify-content: center; align-items: center;}利用到了 2 个关键属性：justify-content和align-items，都设置为center，即可实现居中。
需要注意的是，一定要把这里的flex-center挂在父级元素，才能使得其中唯一的子元素居中。
2、flex + margin这是 flex 方法的变种。父级元素设置 flex，子元素设置margin: auto;。可以理解为子元素被四周的 margin “挤” 到了中间。
<div class="wrapper"> <p>horizontal and vertical</p></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: flex;}.wrapper > p { margin: auto;}3、transform + absolute这个组合，常用于图片的居中显示。
<div class="wrapper"> <img src="http://www.aidi.net.cn/article/detial/5099/test.png"></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative;}.wrapper > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}当然，也可以将父元素 wrapper 的相对定位，移入子元素 img 中，替换掉绝对定位。效果是一样的。
4、table-cell利用 table 的单元格居中效果展示。与 flex 一样，需要写在父级元素上。
<div class="wrapper"> <p>horizontal and vertical</p></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: table-cell; text-align: center; vertical-align: middle;}5、absolute + 四个方向的值相等
使用绝对定位布局，设置margin:auto;，并设置 top、left、right、bottom 的值相等即可（不一定要都是 0）。
<div class="wrapper"> <p>horizontal and vertical</p></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative;}.wrapper > p { width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}这种方法一般用于弹出层，需要设置弹出层的宽高。
6、writing-mode这个方法可以改变文字的显示方向，比如让文字的显示变为垂直方向。
<div class="wrapper"> <div class="wrapper-inner"> <p>horizontal and vertical</p> </div></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; writing-mode: vertical-lr; text-align: center;}.wrapper > .wrapper-inner { writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;}.wrapper > .wrapper-inner > p { display: inline-block; margin: auto; text-align: left;}兼容性上还有些小瑕疵，但大部分浏览器，包括手机端已支持 writing-mode 的写法了。
7、grid像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。
<div class="wrapper"> <p>horizontal and vertical</p></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: grid;}.wrapper > p { align-self: center; justify-self: center;}但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。
8、::after伪元素也能用来实现居中么？感觉还是挺神奇的，看下面这个例子：
<div class="wrapper"> <img src="http://www.aidi.net.cn/article/detial/5099/test.png"></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center;}.wrapper::after { content: ''; display: inline-block; vertical-align: middle; height: 100%;}.wrapper > img { vertical-align: middle;}水平方向很好理解。垂直方向，可以理解为 ::after 把 img 往下拉到了中间。
9、::before另一种是配合font-size: 0;共同施展的魔法。
<div class="wrapper"> <img src="http://www.aidi.net.cn/article/detial/5099/test.png"></div>.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; font-size: 0;}.wrapper::before { display: inline-block; vertical-align: middle; font-size: 14px; content: ''; height: 100%;}.wrapper > img { vertical-align: middle; font-size: 14px;}font-size: 0;的神秘之处在于，可以消除标签之间的间隙。另外，因为伪元素搭配的，都是最基础的 css 写法，所以不存在兼容性的风险。
总结今天共介绍了 9 种居中的方法。像 flex、absolute、grid，这些常用的方法往往可以在工作中，帮我们解决布局的问题。而像 writing-mode、::after、::before，这些神奇的特性仿佛帮我们掀开了 css 魔法大陆的一角，让人神往，忍不住想去探索更多。
来源：爱蒂网
