使用定位让css中元素水平垂直居中

定位的四种属性

1. static,也是其默认属性,属于静态定位,约等于没有定位.给什么值也不会发生位置的改变.
2. relative 相对定位,单独使用时会相对自身的位置进行偏移.原位置得以保留,所以并没有脱离文档流,
3. absolute 绝对定位,单独使用时会相对页面(body)进行偏移,若其父元素有除了static之外的定位属性,则会相对父元素进行偏移.原位置不保留,所以为脱离文档流.
4. fixed 固定定位,相对于浏览器进行定位,原位置不保修,所以为脱离文档流.

原理

• 第一种方法: 水平和垂直居中的方法几乎相同,就是把元素先水平(或垂直)定位到父元素(或者浏览器)中间,再用margin属性往回调元素宽度(或高度)的一半,就成了.

position:absolute;
/*水平居中*/
left:50%;
margin-left: -apx;(a为元素自身宽度的一半);

/*垂直居中*/
top:50%;
margin-top: -apx;(a为元素自身高度的一半);

• 第二种方法: 适用于当且仅当元素需要水平垂直居中时,可以用

position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;