By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

1、块级元素，设置宽高，需要谁居中，给其设置 margin: 0 auto;
2、行内元素：首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
3、使用绝对定位：首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
4、使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

3.父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

4、flex的垂直居中，这种做法可以不定义内部元素的高度

5.使用absolute+transform

1、 使用position/transform/top/left( 已知宽高)
2 、 使用display:flex/flex/align-items: center;jusitify-content: center
3、 margin： 0 auto;(已知宽度)
4、 使用grid

     .parent{
          display: grid;
      .left {
          justify-self: center; 
          align-self: center;
          /* 以上可以简写为  place-self: center;*/
          height: 100px;
          width: 100px;
          /* float: left; */
          background-color: blueviolet;