position

首先应该明白什么是流？这个估计也很容易明白，我就不说了。顺便说下，float设置了这个属性就暂时脱离了流的存在，clear后才会到流里面。 position:absolute| fixed | relative| static | inherit 默认的HTML流属性其实就是指position:static。如果我们想要在页面上固定显示元素，就选择absolute，它是以页面左上角为(0,0)，根据top,left,width,height来布局的，注意这里是根据页面布局。fixed是当前窗口布局，也是左上角为(0,0)，不过，fixed是窗口布局，也就是说会根据滚动条一起移动，相对于当前窗口的位置不变。 relative相对位置，是指子节点和父节点的关系。当一个子节点在父节点中时，默认的position就是relative。在子节点包含在父节点中，这个时候就算你设置的是子节点是absolute，这是也会成为relative，也就是相对于父节点的左上角排版。这点其实也很容易理解，没有绝对，只有相对。HTML中所有的元素都是document的子元素。 接着详细说下各种的特点： （1）static布局是默认，假如在这种布局，他是没有定位的，而且不会继承父元素的属性，W3C文档里面还说 忽略 top, bottom, left, right 或者 z-index 声明

水平居中 定宽的块级元素 .out { } .in { margin: 0 auto; } 不定宽的块级元素（一个div里面多个div要居中） 里面元素设置为内联元素，父元素使用text-align：center； .out { text-align: center; } .in { display: inline-block; } 使用flex布局 .out { display: flex; justify-content:center; } .in { } 给多个div加一个container .out { position: relative; } .container { position: absolute; left:50%; transform: translate(-50%,0) } .in { float: left; } 内联元素居中 .out { text-align:center; } 垂直居中 块级元素垂直居中，知道高度 .out { } .in { margin-top: 75px; } .out { box-sizing: border-box; padding-top: 75px; } .in { } 块级元素垂直居中，不知道高度 .out { position: relative; } .in { position: absolute; top: