CSS居中

水平居中
在不说float效果的影响下,属性margin:0 auto只对块级元素起作用,用于设置自身。

在不说float效果的影响下,属性text-align:center只对inline和inline-block元素有效,用于设置子元素居中。
(子元素为block时默认占据整行,所以没有效果)

水平垂直居中

定位和需要定位的元素的margin减去自身宽高的一半

子元素:
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
绝对定位:上下左右自动
    100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
绝对定位和transfrom
   100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

父元素diplay:table-cell
   display: table-cell;
vertical-align: middle;
text-align: center;


原文地址:https://www.cnblogs.com/littlewriter/p/6494297.html