标签：items 对齐 弹性盒 页面布局 居中 enter flex bsp 使用
1 /* 可以采取绝对定位的方式实现 */ 2 .center { 3 width: 960px; 4 position: absolute; 5 left: 50%;（25%） 6 margin-left: -480px; 7 }
1 /* 借助css3的变形属性Transform来完成 */ 2 .content { 3 position: absolute; 4 left: 50%; 5 transform: translateX(-50%); 6 }
1 /* 固定宽高的垂直居中 */ 2 .content { 3 width: 100px; 4 height: 100px; 5 position: absolute; 6 left: 50%; 7 top: 50%; 8 margin-left: -50px; 9 margin-top: -50px; 10 } 11 /* 不固定宽高的垂直居中 */ 12 .content { 13 position: absolute; 14 left: 50%; 15 top: 50%; 16 /* 左/上边缘向左/上移动自身宽/高度的一半 */ 17 transform: translate(-50%, -50%); 18 }
1 /* 移动端开发中最佳的解决方案 */ 2 .content { 3 /*转为flex弹性盒布局*/ 4 display: flex; 5 /*主轴上的对齐方式为居中*/ 6 justify-content: center; 7 /*交叉轴上对齐方式为居中*/ 8 align-items: center; 9 }
标签：items 对齐 弹性盒 页面布局 居中 enter flex bsp 使用
原文地址：https://www.cnblogs.com/guisenbin/p/10454409.html
