第一中： writing-mode

可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向

第二种： table 形式

通过table单元格的形式设

优点： tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

缺点： 这个不是table的正确方法，不是很建议使用，但是也是可以实现的

第三种： table-cell实现水平垂直居中: table-cell middle center组合使用

​ 直接给父级设

  display: table-cell;vertical-align: middle;text-align: center;

•  
• 为了可以明显看出，我们可以给它设个宽高与边框

   width: 240px;height: 180px;border:1px solid #666;

第四种： 弹性盒子的方式

​ 通过给父元素设置justify-content: center;

​ align-items: center;就可以了

优点： 移动端使用灵活自如

缺点： pc端需要根据兼容情况来判定

第五种： grid（网格布局）

​ 给父级设display:grid;

​ 给子元素设align-self: center;justify-self: center;

优点： 代码量少

缺点： 兼容不如flex，建议用flex

目录

第一中： writing-mode

第二种： table 形式

第三种： table-cell实现水平垂直居中: table-cell middle center组合使用

第四种： 弹性盒子的方式

第五种： grid（网格布局）

​

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！