html css 如何使用transform灵活居中

使用transform居中非常方便。不受自身大小的影响，可以不用提前知道自身大小。可以分别控制左右居中，上下居中。还能在居中的基础上便宜固定像素值。还能比居中偏移容器百分比。总之很方便。

开发环境

1、使用浏览器线上的编辑器非常方便，比如JSRUN，可以参考这篇经验了解。

兼容性

1、transform不兼容ie8或以下的浏览器，ie8或以下的浏览器现在只有不到1%的比例了，兼容性还是比较好的。

div

1、编写最简单的2个div嵌套<div class="outer"> <div class="inner center"> </div></div>

大小和颜色

1、跟居中无关的的css代码分离出来.outer { width: 猱蝰逾鸾500px; height: 300px; 芟鲠阻缒background-color: green; position: relative;}.inner { width: 200px; height: 100px; background-color: wheat; position: absolute;}

上下左右居中

1、只需要3行代码就能实现.center { left: 50%; top: 50%; transform: translate(-50%, -50%);}

单独上下居中或左右居中

1、上下.center { left: 50%; transform: translateX(-50%);}.center { left: 50%; transform: translateX(-50%);}

居中并偏移固定值

1、例如div结构如下<挢旗扦渌;div> <div class="left"> <div class="inner center"> </div> </div> <div class="right"> </div></div>

2、css如下.left { width: 400px; height: 200px; background-color: wheat;}.right { width: 100px; height: 200px; left: 0; top: 0; background-color: yellow; position: absolute; margin:8px}.inner{ width: 100px; height: 100px; background-color: green;}

3、使用transform能实现带像素偏移的居中.center { position:relative; margin-left: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%);}

居中并偏移容器百分比

1、这个比较简单，把top或left的50%改成其它数值就行。例如向上偏移容器10%高度的代码是.center { left: 50%; top: 40%; transform: translate(-50%, -50%);}