css水平居中与垂直居中

一、水平居中

1.inline元素用tet-align:center;

2.block元素用margin：auto；

二、垂直居中

1.flex弹性盒子

父元素定义 display:flex;align-item:center;

2.absolute绝对定位

　i.position:absolute;top:50%;left:50%;width:x;height:y;margin-left:-x/2;margin-top:-y/2;

缺点是必须指定元素的宽高，否则无法给定margin，显得不够灵活。可以使用translate（）替代；

　ii.position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

3.vh视口单位

可使用vh视口单位代替position

vh是视口高度，vw是视口宽度。例如1vh表示视口高度的1%；

width:x;//因为去掉了absolute，失去了包裹性，所以需要指定width

margin：50vh auto 0;//上边距50%，左右居中，下边距0

transform:translateY(-50%)

 

原文地址：https://segmentfault.com/a/1190000006700787