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 写法，所以不存在兼容性的风险。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/38334.html；
