CSS如何不定义宽高实现垂直水平居中-创新互联

CSS如何不定义宽高实现垂直水平居中？针对这个问题，今天小编总结这篇有关垂直水平居中的文章，可供感兴趣的小伙伴们参考借鉴，希望对大家有所帮助。

1、flex

大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的选。

   
horizontal and vertical

.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 “挤” 到了中间。

   
horizontal and vertical

.wrapper {
   width: 300px;
   height: 300px;
   border: 1px solid #ccc;

   display: flex;
}

.wrapper > p {
   margin: auto;
}

3、transform + absolute

这个组合，常用于图片的居中显示。

.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 一样，需要写在父级元素上。

   
horizontal and vertical

.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）。

   
horizontal and vertical

.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

这个方法可以改变文字的显示方向，比如让文字的显示变为垂直方向。

   

     
horizontal and vertical
   

.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

像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。

   
horizontal and vertical

.wrapper {
   width: 300px;
   height: 300px;
   border: 1px solid #ccc;

   display: grid;
}

.wrapper > p {
   align-self: center;
   justify-self: center;
}

但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。

8、::after

伪元素也能用来实现居中么？感觉还是挺神奇的，看下面这个例子：

.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; 共同施展的魔法。

.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 写法，所以不存在兼容性的风险。

看完这篇文章，你们学会不定义宽高实现垂直水平居中的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。