CSS-元素居中显示方案

本文是个人学习笔记,不具有参考价值,请谨慎查看。

水平居中:

1、行内级元素:

设置父元素的text-align:center

2、块级元素:

设置当前块级元素margin: 0 auto

3、决定定位

有宽度的情况下,left:0;right:0;margin:0 auto

4、flex布局

Justify-content:center

垂直居中:

1、绝对定位

元素有高度的情况下,top:0;bottom:0;/margin:auto 0;

2、flex布局

设置align-center:center;

3、top+translate组合

position:relative

top:50%

position:translateY(-50%)



本文是个人学习笔记,不具有参考价值,请谨慎查看。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容