让一个元素水平居中,有多少种方案？.md

让一个元素水平居中,有多少种方案？

水平居中

• 对于行内元素:text-align:center;
• 对于确定宽度的块级元素：
  • width和margin实现margin:0 auto;
  • 绝对定位和margin-left:-width/2，前提是父元素position:relative
• 对于宽度未知的块级元素
  • table标签配合margin左右auto实现水平居中，使用table标签(或将块级元素设置值为display:table)，在通过标签添加左右margin为auto
  • dispaly:inline-block实现的居中方法 dispaly:inline-block和text-align:center;实现水平居中
  • 绝对定位+transform，translateX可以移动本身元素的50%
  • flex布局使用justify-content:center

垂直居中

• 利用line-height实现居中。这种方法比较适合文字类
• 通过设置父容器 相对定位，子级设置：绝对定位，标签通过margin实现自适应居中
• 弹性布局flex父级设置dispaly:flex，子级设置margin为auto实现自适应居中
• 父级设置相对定位，子级设置绝对定位，并且通过位移transform实现
• table布局，父级通过转换成表格形式，然后子级设置vertical-align实现(需要注意的是：vertical-align：middle使用的前提条件是内联元素以及display值为table-cell`)