常用居中方法 --- 前端

一 50%法

外部元素{

　　position:relative  // 对父元素设置相对定位

}

内部元素{

　　position:absolute;   //子元素设置绝对定位  然后top和left值都为50%

　　left:50%;

　　top:50%;

　　transform:translate -50% -50%         //利用动画属性 将其自身回移子元素50%的距离

}

二 对子元素四周设置相同的值,然后利用margin居中

子元素{

　　position:absolute;

　　left:0;

　　top:0;

　　right:0;

　　bottom:0;

　　margin:auto;           //对子元素四周设置相同的值,然后利用margin居中

}

三 flex布局

父元素{

　　display:flex;

　　align-items:center;

　　justify-content:center;

}

四 grid布局   

五 table-cell布局   

六 浮动

父元素{

　　float:left;   //父元素左浮动  距离50%

　　left:50%;

}

子元素{

　　position:relative;   子元素相对于自身定位  移动负的50%

　　left:-50%

}

七 字体居中

字体{

　　height:100px;

　　line-height:100px;

　　text-align:center;

}

字体居中该样式只能操作块元素或者被CSS 显示成块元素的内联元素