水平居中

行内元素和文本水平居中

父元素设置text-align:center,是内部的行内元素元素和文本水平方向居中，下面的a标签水平方向居中
one two three

单个块级元素水平居中

div水平居中,在需要居中的元素上设置margin:0 auto;

多个块级元素同排居中,inline-block方法

两个div并排居中显示，给div设置display:inline-block;父元素设置text-align:center;

多个块级元素同排居中，flex方法

两个div并排居中显示，父元素设置display:flex;justify-content:center

垂直居中

行内元素

单行垂直居中，padding方法

单行文本垂直居中，包裹元素不设置高度，设置上下相同的内边距。

单行垂直居中，line-height方法

单行文本垂直居中，包裹元素设置line-height和height相同。

多行垂直居中，display:table-cell方法

多行文本垂直居中，包裹元素的父元素设置display:table,包裹元素设置display:table-cell。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

多行垂直居中，display:flex方法

多行文本垂直居中，包裹元素的父元素设置display:flex,align-items:center; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

块级元素

高度已知

高度已知，父元素相对定位，居中元素设置为position:absolute;top:50%; margin-top:-(height/2)

高度未知

高度未知，居中元素设置为position:absolute; top:50%;transform:translateY(-50%)

不管高度已知还是未知，都可以用display:flex;

居中元素的父元素设置为display:flex;align-items:center;

水平垂直居中

宽度和高度已知

居中元素绝对定位，top,left设置为50%，margin-top,margin-left分别设置为高度，和宽度一半的负值

宽度和高度未知

居中元素绝对定位，top,left设置为50%，transform:translate(-50%, -50%);

不管宽高已知还是未知，都可以用display:flex;

居中元素的父元素设置为display:flex;justify-content: center;align-items:center;