css上下左右居中实现方法总结（2018-07-10）

1.定位的方法

父盒子：position: relative;

子盒子：position: absolute;left: 50%;top:50%;transform:translateX(-50%) translateY(-50%);

2.flex布局

父盒子：display:flex;justify-content: center;align-items: center;

3.display:table-cell

父盒子： display: table-cell;vertical-align:middle;text-align:center;子盒子：display:inline-block;vertical-align:middle;(子盒子若为行内块元素则不用加display:inline-block;)

盒模型总结

盒模型组成：content,padding,border,margin

盒模型有两种标准：

1.标准模型：盒模型的宽高只是内容的宽高

2.IE模型：盒模型的宽高是内容（content）+ 填充（padding）+ 边框（border）的总宽高

dom.style.width只能获取到内联样式上设置的宽高

document.getElementById('test').currentStyle.width//只在IE上支持

window.getComptedStyle(dom).width 兼容更多浏览器IE google 火狐

dom.offsetWidth最常用的获取盒模型的宽度