水平居中
（1）使用inline-block+text-align
<div class="parent">
<div class="child">demo</div>
</div>
.child { display:inline-block; } .parent { text-align:center } 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 优点：兼容性好，甚至可以兼容ie6、ie7 (2)使用table+margin .child { display:table margin:0 auto; }原理：先将子框设置为块级表格来显示，再设置子框居中以达到水平居中。缺点：不支持ie6、ie7,将div换成table（3）使用absolute+transform .child { position:absolute; left:50%; transform:translateX(-50%) } .parent { position:relative }缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀(4)使用flex+margin .child { margin:0 auto } .parent { display:flex }缺点：低版本浏览器(ie6 ie7 ie8)不支持(5)使用flex+justify-content .parent { display:flex; justify-content:center } 缺点：低版本浏览器(ie6 ie7 ie8)不支持 垂直居中 (1)使用table-cell+vertical-align .parent { display:table-cell； vertical-align:middle } (2)使用absolute+transform .child { position:absolute; top:50%; transform:translateY(-50%) } .parent { position:relative }缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀 (3)使用flex+align-items .parent { position:flex; align-items:center; } 水平垂直居中 (1)使用absolute+transform(未知高度) .parent { position:relative; } .child { position:absolute; left:-50%; top:-50% transform:tranplate(-50%,-50%) } (1.1)使用absolute+transform(已知高度) .parent { position:relative; } .child { position:absolute; width:100px; height:100px; left:-50%; top:-50% margin: -50px 0 0 -50px; } (2)使用inline-block+text-align+table-cell+vertical-align .parent { text-align:center; display:table-cell; vertical-align:middle; } .child { display:inline-block; } 优点：兼容性较好 (3)使用flex+justify-content+align-items .parent { display:flex; justify-content:center; align-items:center; } 缺点：兼容性存在一定问题
随时随地看视频
