一、水平居中
1
.行内元素水平居中
利用 text-align: center 可以实现在
块级元素内部的行内元素水平居中
。此方法对
inline、inline-block、inline-table和inline-flex元素
水平居中都有效；如果块级元素内部包着也是一个块级元素，可以先
将其由块级元素改变为行内块元素
，再通过设置行内块元素居中以达到水平居中。
2.块级元素的水平居中
①将该块级元素左右外边距margin-left和margin-right设置为auto，
需要设置定宽
②使用table+margin:0,auto，将子元素设置为块级表格来显示（类似），再将其设置水平居中，
display:table在表现上类似block元素
，但是宽度为内容宽。
③使用absolute+transform，将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半
(left:50%)
，最后通过向左移动子元素的一半宽度以达到水平居中
(transform:translateX(50%))
④使用flex+justify-content flex中的
justify-content
:center
属性来达到水平居中
⑤使用flex+margin 通过flex将父容器设置为Flex布局，再设置子元素居中(margin:0,auto)。
-
多块级元素水平居中
①利用flex布局 flex实现水平居中，
其中justify-content用于设
置弹
性盒子元素在主轴（默认横轴）方向上的对齐方式
②利用inline-block
将水平排列的块状元素设为display:inline-block
，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
①定宽的非浮动元素 通过子元素设置relative +负margin,
(left:50%,margin-left:-
自身宽度
50%
)
②不定宽的浮动元素 通过父子容器都相对定位，
要清除浮动，给外部
(
父元素
)
元素加上float。
父级left
:50%
，
子级right
:50%
③通用办法flex布局(
不管是定宽还是不定宽
) 利用
弹性布局(flex)的
justify-content
:center
属性，实现水平居中。
5.绝对定位元素水平居中 通过子元素绝对定位(
position: absolute;left: 0; /*此处不能省略，且为0*/ right: 0;/*此处不能省略，且为0*/
)，外加margin: 0 auto来实现。
二、垂直居中
1.单行内联元素垂直居中 line-height等于height
2.多行内联元素垂直居中
①利用flex布局（flex） 利用flex布局实现垂直居中，
flex-direction: column定义主轴方向为纵向,+jusitify-content:center
。
②利用表布局（table）
父元素
(display:table)
,可以实现
子元素(display:table-cell,利用表布局的vertical-align: middle)的垂直居中
3 块级元素垂直居中
①使用absolute+负margin(已知高度宽度) 通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
②使用absolute+transform
当垂直居中的元素的高度和宽度未知时
，可以transform属性向Y轴反向偏移50%的方法实现垂直居中。
③使用flex+align-items 通过设置
flex布局中的属性align-items:
center
，使子元素垂直居中。
④使用table-cell+vertical-align
将父元素转化为一个表格单元格(
display: table-cell;
)显示
（类似 <td> 和 <th>）,再通过
设置 vertical-align:center属性
，使表格单元格内容垂直居中。
三、水平垂直居中
1：绝对定位与负边距实现（
已知高度宽度
）需要知道被垂直居中元素的高和宽，
position: absolute; top: 50%; left: 50%; margin: –
(
高度
50%
)
px 0 0 –
(
宽度
50%
)
px;
2：绝对定位与margin:auto（
父元素必须有高度
）无需知道被垂直居中元素的高和宽，
子元素
:
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;//注意此处的写法
3：绝对定位+CSS3(未知元素的高宽) 利用transform，
在未知元素的高宽
的情况下实现元素的垂直居中
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
4：flex布局 利用flex布局，
父容器必须有高度
，其中
justify-content:center
用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而
align-items:center
属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
5、flex/grid与margin:auto(最简单写法) 容器元素
设为flex/grid布局
，
子元素只要写margin: auto即可