CSS布局篇之水平垂直居中

定宽高 + 绝对定位 + 0 + auto边距

这种方法需要知道元素的宽高,但是兼容性绝佳。

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;

定宽高 + 绝对定位 + 50% + 负边距

已知宽高,通过50%调整位置,负边距调整为自身宽度的一半

position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;

不定宽高 + 绝对定位 + 50%

top和left是相对于父元素偏移,而translate是相对于自身变形偏移,因而达到绝对居中效果,而且不需要知道自身宽度,非常优秀。缺点是使用的浏览器版本需要支持transform。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

flex居中

父元素设置如下属性:

display: flex;
align-items: center;
justify-content: center;

还有table布局也可以实现…

发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览