前端 - css - - 实现元素水平垂直方向居中

1、通过外边距和行高

margin:0 auto; // 实现水平居中
height: 100px;
line-height: 100px; // 行高和高度相等实现垂直居中

2、浮动

float: left/right; // 开启浮动
top: 50%; // 垂直居中
left: 50%; // 水平居中

3、定位（推荐）

position: relative/absolute/fixed; // 开启定位
top: 50%; // 向下移动父元素的一半
left: 50%; // 向右移动父元素的一半
transform: translate(-50% -50%); // 向上、向左移动自身的一半

4、flex布局（推荐）

// 父元素:
display: flex;
justify-content: center; // 实现子元素水平居中
align-items: center; // 实现子元素垂直居中

5、文字居中： text-align: center

6、图片居中：vertical-align: center

7、根据父元素大小设置 margin 使外边距等于父元素大小减去盒子大小（垃圾写法 不推荐）