元素居中方法

方法一：

.container{
            width:500px;
            height:500px;
            display:flex;
            background-color: red;
            justify-content:center;
            align-items:center;
        }
        .center{
            width:200px;
            height:200px;
            background-color: orange;
        }

方法二：（只能已知元素宽高 情况下可用）

position：absolute；
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;

方法三：

.container{
            width:500px;
            height:500px;
            background-color: red;
            position:relative;
        }
.center{
    width:200px;
    height:200px;
    background-color: orange;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);//或者 transform:translateX(-50%) translateY(-50%);
}

方法四：

.container{
            width:500px;
            height:500px;
            background-color: red;
            position:relative;
        }
  .center{
        width:200px;
          height:200px;
          background-color: orange;
          position:absolute;
          margin:auto;
          left:0;
          top:0;
          bottom:0;
          right:0;
      }

方法五：（图片居中）

display:table-cell
text-align:center;
vertical-algin:middle

方法六：（文字居中）

text-align:center;
height:20px;
line-height:20px;

方法七：（div水平居中）

div{
width:200px;
margin:0 auto;
}