简介CSS9种方法实现不定宽高的垂直水平居中：有常见的flex、transform、absolute等等。也有CSS3的网格布局。还有伪元素的方法，是的，你没有看错，::after和::before也可以实现居中。1、flex大家的第一反应，可能就是flex了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。horizontalandvertical.wrapper{width:3
CSS 9种方法实现不定宽高的垂直水平居中：有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。
1、flex
大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。
<divclass="wrapperflex-center"><p>horizontalandvertical</p></div>
.wrapper{width:300px;height:300px;border:1pxsolid#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 “挤” 到了中间。
<divclass="wrapper"><p>horizontalandvertical</p></div>
.wrapper{width:300px;height:300px;border:1pxsolid#ccc;display:flex;}.wrapper>p{margin:auto;}
3、transform + absolute
这个组合，常用于图片的居中显示。
<divclass="wrapper"><imgsrc="test.png"></div>
.wrapper{width:300px;height:300px;border:1pxsolid#ccc;position:relative;}.wrapper>img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
当然，也可以将父元素 wrapper 的相对定位，移入子元素 img 中，替换掉绝对定位。效果是一样的。
4、table-cell
利用 table 的单元格居中效果展示。与 flex 一样，需要写在父级元素上。
<divclass="wrapper"><p>horizontalandvertical</p></div>
.wrapper{width:300px;height:300px;border:1pxsolid#ccc;display:table-cell;text-align:center;vertical-align:middle;}
5、absolute + 四个方向的值相等
使用绝对定位布局，设置 margin:auto;，并设置 top、left、right、bottom 的 值相等即可（不一定要都是 0）。
<divclass="wrapper"><p>horizontalandvertical</p></div>
.wrapper{width:300px;height:300px;border:1pxsolid#ccc;position:relative;}.wrapper>p{width:170px;height:20px;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;}
这种方法一般用于弹出层，需要设置弹出层的宽高。
6、writing-mode
这个方法可以改变文字的显示方向，比如让文字的显示变为垂直方向。
<divclass="wrapper"><divclass="wrapper-inner"><p>horizontalandvertical</p></div></div>
.wrapper{width:300px;height:300px;border:1pxsolid#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
像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。
<divclass="wrapper"><p>horizontalandvertical</p></div>
.wrapper{width:300px;height:300px;border:1pxsolid#ccc;display:grid;}.wrapper>p{align-self:center;justify-self:center;}
但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。
8、::after
伪元素也能用来实现居中么？感觉还是挺神奇的，看下面这个例子：
<divclass="wrapper"><imgsrc="test.png"></div>
.wrapper{width:300px;height:300px;border:1pxsolid#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; 共同施展的魔法。
<divclass="wrapper"><imgsrc="test.png"></div>
.wrapper{width:300px;height:300px;border:1pxsolid#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 写法，所以不存在兼容性的风险。
下载链接：网站源码/小程序源码/网站模板下载
