1、水平居中（宽度未知）
例：有两个div，大的div包裹着小的div，如何使小的div水平居中在大的div中？
html结构实例
解决方案：(1)inline-block + text-align
初始DEMO是块级元素，会充满父元素；inline-block默认宽度为内容宽度
css样式
优点：兼容性较好，甚至可以兼容IE6
缺点：子元素会继承父元素的text-align，使子元素里的内容也水平居中
解决方案(2)：table + margin
table在表现上非常相似block，但table元素的宽度跟着内容走，是内容宽度
css样式
优点：只需在子元素child上设置css样式，不用关心父元素的
缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式
解决方案(3)：absolute + transform
这是用绝对定位和偏移解决方案
css样式
left:50%; 将子元素距离左边50%，translateX是将自身宽度往左偏移50%；结果是水平居中
优点：因为position：absolute;脱离文档流，所以不会影响其他的子元素；
缺点：transform是css3的内容，所以兼容性较差；
解决方案(4)：flex + justify-content
css样式
css样式同上
优点：只需设置父元素，不用设置子元素
缺点：flex也是css3的，兼容性较差
2、垂直居中(高度未知)
例：有两个div，大的div包裹着小的div，如何使小的div垂直居中在大的div中？
html结构
示例样式
解决方案1：table-cell + vertical-align
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以可以设置垂直居中
设置css样式后
css样式
解决方案2：absolute + transform
css样式同水平居中，同样适用定位和偏移解决垂直居中
css样式
解决方案3：flex + align-items
设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch。如：
父元素display:flex;样式 再设置align-items:center; 显示为垂直居中
设置css样式后
css样式
3、水平垂直居中(父容器和子容器宽度高度未知)
我们可以综合水平居中和垂直居中一起
例：
（1）inline-block + text-align +table-cell +vertical-align
css样式1
（2）absolute + transform
css样式2
（3）flex + justify-content + align-items
css样式3
总结：解决此类问题，我们需要了解css属性的值和特性，了解属性以后，对问题进行分解，把特性和分解的问题进行一些联系，问题可以用那些特性实现，综合解决
网友评论