CSS 元素居中方式总结
作者:
WangMin
格言:努力做好自己喜欢的每一件事
在开发过程中,很多网页需求要求我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式。
1|01、margin:0 auto 水平居中
也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。前提:已设置width值。
HTML:
CSS:
注意:这种对齐方式要求居中元素是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。
2|02、text-align:center 方式
这种方式可以水平居中块级元素中的行内元素,如inline,inline-block;
但是如果用来居中块级元素中的块级元素时,如div中的div,当内层的div有自己的宽度,这种方法就会失效。只能让里面div的文字等内容居中,而div仍然是左对齐的。
一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。
3|03、position:absolute方式水平垂直居 (脱离文档流的居中方式)
1)absolute + 负margin(已知宽高 )
使用绝对定位和负外边距对块级元素进行垂直居中,利用 position:absolute
搭配top,left 50%,再将 margin
设为负值也可以对div进行水平垂直居中。margin中的值为该div宽度、高度的一半。
我们可以总结成一个公式:
left:50%; margin-left:负的宽度的一半;top:50%; margin-top:负的高度的一半;
以上CSS代码可以简化,但居中效果一样:使用css3计算的方式居中元素calc,代码如下:
以上代码的计算原理跟我总结的公式原理是一致的,其优点是简化代码,提高网页的执行效率。
2)absolute + transform(未知宽高)
这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。但是当我们不知道被居中块级元素的尺寸的时候该怎么办呢?解决方式如下:
这种方法非常明显的好处就是不需要知道被居中的元素的尺寸,因为transform中偏移的百分比就是相对于元素自身的尺寸来说的,当被居中的元素是被自己内部元素撑开宽或者高的时候可适用此方法。
3)absolute + margin auto
4|04、padding 填充方式
利用 padding
和 background-clip
配合实现 div
的水平垂直居中,通过 backgroun-clip
设置为 content-box
,将背景裁剪到内容区外沿,再利用 padding
设为外div减去内div的差的一半,来实现:
这种方式看似没有什么技术含量,但其实在某种场景下也是非常好用的。
5|05、display:table-cell(未知宽高)
给父元素设置 display:table
,可以通过 display: table-cell 将要对居中的子元素模拟成一个表格单元格 td, 配合 width
,text-align:center
,vertical-align:middle
让大小不固定元素垂直居中,float
、absolute
等属性都会影响它的实现,不影响margin属性。
6|06、display:flex 居中
元素可以通过设置 display:flex;
将其指定为flex布局的容器,指定好了容器之后再为其添加 align-items
属性和 justify-content
属性,其中 align-items
属性属性定义项目在交叉轴(这里是纵向周)上的对齐方式,可能的取值有五种,分别如下:
flex-start:交叉轴的起点对齐;flex-end:交叉轴的终点对齐;
center:交叉轴的中点对齐;baseline项目第一行文字的基线对齐;
strech(该值是默认值):如果项目没有设置高度或者设置为auto,那么将占满整个容器的高度。
这种方式最为简便,就是兼容性不好,不过随着时间的前进,各大浏览器一定会都兼容的。
7|07、line-height 行高方式
行内元素的垂直居中把height和line-height的值设置成一样的即可。
8|08、css3的fit-content
“fit-content”是CSS中给“width”属性新加的一个属性值,他配合margin可以轻松的实现水平居中的效果,但是浏览器兼容性差,不推荐使用。
9|09、利用vertical-align:middle(未知宽高)
这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样,而且还要结合 display:inline-block
。这方法不常见,所以不推荐使用。
以上是我目前所能理解的元素居中方式,后面如果有新的方式会补充的。
以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!
__EOF__

本文链接:https://www.cnblogs.com/wmbuke/p/13693839.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库