天涯论坛

 找回密码
 立即注册
搜索
查看: 96|回复: 0

css 中元素居中的方式有哪些?

[复制链接]

3058

主题

155

回帖

9923万

积分

论坛元老

Rank: 8Rank: 8

积分
99238917
发表于 2024-6-30 09:40:31 | 显示全部楼层 |阅读模式

在 CSS 中,有几种常用的办法能够将元素居中:

运用 margin: auto 属性,将元素的上下外边距设为 auto,这般能够使元素在父容器内水平居中了。
Copy code .center { width: 50%; margin: 0 auto; }
运用 text-align: center 属性,将元素的文本内容水平居中。
Copy code .center { text-align: center; }
运用 flexbox 布局,经过设置 display: flex 和 justify-content: center 属性,就能够将元素在父容器内水平居中了。
Copy code .parent { display: flex; justify-content: center; }
运用 grid 布局,经过设置 display: grid 和 place-items: center 属性,就能够将元素在父容器内垂直水平居中了。
Copy code .parent { display:




上一篇:实现CSS居中的多种办法
下一篇:css各样居中
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-24 23:35 , Processed in 0.099568 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.