常见的几种绝对居中的方法

绝对居中

• 方法一

.parent {
	display: flex;
    justify-content: center;
    align-items: center;
    }

• 方法二

.parent {
      width: 100px;
      height: 100px;
      position: relative;
      background: #f91;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #000;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

• 方法三

.parent {
      width: 100px;
      height: 100px;
      position: relative;
      background: #f91;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

方法四

.parent {
      width: 100px;
      height: 100px;
      display: table-cell;
      background: #f91;
      text-align: center;
      vertical-align: middle;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #000;
      display: inline-block;
    }