水平居中
1. 行内元素
语法:text-align:center
使用范围:inline、inline-block、inline-table、inline-flex
2. 块级元素
- margin: 0 auto;(必须要有宽度)
- display:table; + margin: 0 auto;(宽度是内容的宽度)
- position: absolute + transform:translate();(兼容性不强)
- display:flex; + justify-content:center;
3. 多块级元素
- display:flex; + justify-content:center;
- inline-block
- 浮动
- 绝对定位
垂直居中
1 .单行内联元素
line-height和height设置一样高
2 .多行内联元素
- flex-direction:column;(兼容性不强)
- 表格的vertical-align:middle;
3 .块级元素
- position: absolute + transform:translate();(兼容性不强)
- position: absolute + 负margin;(已知高度)
- flex布局中的align-items
- display:table-cell; + vertical-align:middle;
水平垂直居中
- 绝对定位与负边距实现(已知高度)
- 绝对定位 + margin:auto(已知高度)
- 绝对定位 + transform:translate();
- flex布局中的align-items和 justify-content:center;
图片和文字在一起的居中方法
- display: inline-block;(两个一起)+ vertical-align: middle;
- 浮动(一起浮动)
- 定位
- 把图片设置为背景图片,利用背景定位