水平居中
1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式
行级元素
2.块级元素：为其自身设置margin:auto样式
块级元素
垂直居中
方法一：
display:table;此元素会作为块级表格来显示（类似
| 和 | ）
块级元素
方法二： 利用flex布局使内部块级元素水平，垂直居中（display:flex;justify-content: center; align-items:center;） 块级元素
方法三： 利用定位实现，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%); 块级元素 方法四： 绝对定位， left：50%，top: 50% + margin-left:-(自身宽度的一半),margin-top:-(自身高度的一半) 缺点：要自己计算容器的宽高，万一容器的宽高改变还要修改css样式 块级元素 方法五： 绝对定位，left: 0，right: 0, top: 0, bottom: 0 + margin：auto 块级元素 方法六： 固定定位position:fixed;并设置一个较大的z-index层叠属性值 块级元素 方法七： 要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取： 块级元素 方法八： Flex加margin:auto 块级元素 |
|---|