作者：蔷薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，标签位置居中一直是困扰Web前端的难题。在本文中，我对这类问题进行了探究和给出了几点建议，供读者参考。
1 行内标签
1.1 水平居中
在父级标签中使用 text-align: center。
效果：
1.2 垂直居中
如果是单行，则为该标签设置行高（line-height）且与其父级标签 height 相等即可。
效果：
如果是多行，稍微有点麻烦，需要在该标签设置 display: table-cell 和 vertical-align: middle，在其父级标签设置 display: table。
效果：
2 块标签
2.1 水平居中
方法一：在父级标签中使用 flex 弹性盒子。
效果：
方法二：在该标签中使用 margin 属性。
效果：
2.2 垂直居中
在父级标签中使用 flex 弹性盒子。
效果：
总结：对于行内标签居中，优先考虑文本对齐（text-align）和显示单元格（table-cell）；对于块标签居中，优先考虑显示弹性盒子（flex）。
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/265786.html
赞 (120)
打赏
BTC难以突破强压力位，震荡局面不变
« 上一篇2019-12-30 14:39:31
华为全资子公司高管变更：郭平卸任，孟晚舟退出董事
下一篇 »2019-12-30 14:55:31