html css 如何使用transform灵活居中？
1、使用浏览器线上的编辑器非常方便，比如JSRUN，可以参考这篇经验了解。
1、transform不兼容ie8或以下的浏览器，ie8或以下的浏览器现在只有不到1%的比例了，兼容性还是比较好的。
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%);
}
