css布局之水平垂直居中
2019-10-16 本文已影响0人
行走的蛋白质
- 应该脱口而出的几种方式
定位三种
flex
table-cell
js 实现
- 基础 html
<style>
.outer {
height: 800px;
width: 1200px;
background-color: #dfdfdf;
}
.inner {
width: 100px;
height: 50px;
background-color: #999;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
- 定位 + margin ：要求已知 inner 宽高
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
}
- 定位 + left、right、top、bottom + margin：可以不用知道 inner 的宽高
.outer {
position: relative;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
- 定位 + transform ：可以不用知道 inner 的宽高
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
/*transform: translate(-50px, -25px);*/
transform: translate(-50%, -50%);
}
- flex 布局 ：可以不用知道 inner 的宽高，兼容性问题不支持 IE9
.outer {
display: flex;
justify-content: center;
align-items: center;
}
- table-cell
.outer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
}
