实现水平与垂直居中 水平居中行内元素块级元素 垂直居中单行文本的水平垂直居中多行文本的水平垂直居中块级元素水平垂直居中固定宽高的水平垂直居中不固定宽高的水平垂直居中基于Flex实现水平垂直居中 橘子很甜。@快乐养兔

水平居中 行内元素 text-align:center; 块级元素 定宽：可以采取决定定位的方式实现 .center { width: 960px; position: absolute; left: 50%; margin-left: -480px; } 不定宽：借助css3的变形属性Transform来完成 .content { position: absolute; left: 50%; transform: translateX(-50%); } 垂直居中 单行文本的水平垂直居中 元素的高度和行高相等时，文本呈现垂直居中 height == line-height 高等于行高 多行文本的水平垂直居中 不固定高度的垂直居中 通过设置padding实现 固定高度的垂直居中 使用display设置为 table-cell, 配合样式vertical-align设置为middle来实现table-cell：以表格单元格的形式来解析代码 块级元素水平垂直居中 固定宽高的水平垂直居中 .content { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } 不固定宽高的水平垂直居中 .content { position: absolute; left: 50%; top: 50%; /* 左/上边缘向左/上移动自身宽/高度的一半 */ transform: translate(-50%, -50%); } 基于Flex实现水平垂直居中

移动端开发中的最佳解绝方案

.content { /*转为flex弹性盒布局*/ display: flex; /*主轴上的对齐方式为居中*/ justify-content: center; /*交叉轴上对齐方式为居中*/ align-items: center; } 橘子很甜。@快乐养兔

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。