定位和居中问题

1.对一个有宽度，有高度的块状元素进行居中

方法一position：

 

由于需要对其进行居中，则其必须脱离原来的文档流，然后进行相应的定位操作，根据定位的相关知识可以知道：

 

position:static 静态定位，也就是原本的文档流

 

relative 相对定位，相对该元素在文档流中的位置进行定位

 

absolute 绝对定位，会脱离文档流，根据最近的定位不是static的父元素进行定位

 

fixed 固定定位，固定在浏览器的相对位置，不会随着滚动条而进行滚动

 

根据以上知识可以知道我们要使其脱离文档流进行定位，一般使用absolute，因为可以根据父元素进行定位

注意：对于定位中的top与left是根据元素最顶部以及最左上角来进行定位，所以对于有宽度和高度的元素，应该在减去相应的高度和宽度值得一般

居中:相对父元素left:50%;top:50%;margin-left:-width/2;margin-top:-height/2

浮动的元素要放在不浮动的元素的上方，否则会被正常流的位置所挡住而不能实现浮动

方法二flexbos:

弹性盒子：display: -webkit-flex; display: flex; 相关知识链接http://zh.learnlayout.com/flexbox.html

.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

注：弹性盒子的弹性是应用给子元素的，则子元素需要设置宽度以及高度值，该弹性盒子的高度以及宽度设置为100%,并且弹性盒子的父元素也需要设置高度以及宽度为100%

方法三table:

创建一个div,,display值为display:table

创建一个div,display值为display:table-cell;设置垂直居中:vertical-align:middle

在创建一个div,设置相应的宽度和高度，设置水平居中:margin:0 auto

 注：

1.宽度与高度的具体值加在具体的内容区域上

2.只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用