固定宽度的元素-水平居中

行内元素

对其父元素设置text-align值为center

块级元素

对自身设置margin值为auto

自适应块级元素-水平居中

  1. {
  2.   position:absolute;
  3.   left:50%;
  4.   transform:translateX(-50%);
  5. }

行内元素垂直居中

对于单行文本的垂直居中，只需设置元素的高height等于元素的行高line-height

块级元素的垂直居中

固定宽高：position+负margin

  1. {
  2.   position:absolute;
  3.   left:50%;
  4.   top:50%;
  5.   margin-left:-50px;/*向左移动自身宽度一半*/
  6.   margin-top:-50px; /*向上移动自身高度一半*/
  7. }

不固定宽高：position+translate变形

  1. {
  2.   position:absolute;
  3.   left:50%;
  4.   top:50%;
  5.   transform:translate(-50%,-50%);
  6. }

新的布局方案

  • flex布局
  • grid布局