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

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

水平居中

• 對於行內元素: text-align: center;

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

  • width和margin實現。margin: 0 auto;
  • 絕對定位和margin-left: -width/2, 前提是父元素position: relative

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

  • table標籤配合margin左右auto實現水平居中。使用table標籤（或直接將塊級元素設值為display:table），再通過給該標籤新增左右margin為auto。
  • inline-block實現水平居中方法。display：inline-block和text-align:center實現水平居中。
  • 絕對定位+transform，translateX可以移動本身元素的50%。
  • flex佈局使用justify-content:center

  垂直居中

• 利用line-height實現居中，這種方法適合純文字類

• 通過設定父容器相對定位，子級設定絕對定位，標籤通過margin實現自適應居中

• 彈性佈局flex:父級設定display: flex; 子級設定margin為auto實現自適應居中

• 父級設定相對定位，子級設定絕對定位，並且通過位移transform實現

• table佈局，父級通過轉換成表格形式，然後子級設定vertical-align實現。（需要注意的是：vertical-align: middle使用的前提條件是內聯元素以及display值為table-cell的元素）。