讓乙個元素水平垂直居中，到底有多少種方案？

•對於行內元素:

給如果父級元素是塊級元素，則直接給父級元素設定text-align: center;

如果父級不是塊級元素，則先將其父元素設定為塊級元素，再給父元素設定 text-align: center;

•對於確定寬度的塊級元素：

width和margin實現。margin: 0 auto;

首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的left:50%。設定絕對子元素的 margin-left: -元素寬度的一半px; 或者設定transform: translatex(-50%);

• 對於寬度未知的塊級元素

inline-block實現水平居中方法。該元素display：inline-block，它的父元素設定text-align:center實現水平居中。

絕對定位+transform，translatex可以移動本身元素的50%。

display
:absolute;
left
:50%;
transform
:translate
(-50%)

table標籤配合margin左右auto實現水平居中。使用table標籤（或直接將塊級元素設值為display:table），再通過給該標籤新增左右margin為auto。

flex布局，只需要給待處理的塊狀元素的父元素新增屬性 display: flex; justify-content: center;

•單行的行內元素

利用line-height設定單行行內元素的"行高等於盒子的高"實現居中，這種方法適合純文字類

•對於多行的行內元素

使用給父元素設定display:table-cell;和vertical-align: middle;屬即可；

•對於塊級元素

首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50%。設定絕對子元素的 margin-top: -元素高度的一半px; 或者設定transform: translatey(-50%);（高度未知的情況下用transform，高度已知的情況下二者都可以用）

flex方案（高度定不定都可以），只需要給待處理的塊狀元素的父元素新增屬性 display: flex; align-items: center;

彈性布局flex（高度定不定都可以）:父級設定display: flex; 子級設定margin為auto實現自適應居中（可分別實現水平和垂直的居中）

已知高度和寬度的元素，設定父元素為相對定位，給子元素設定絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;（水平垂直居中）