外链论坛

 找回密码
 立即注册
搜索
查看: 81|回复: 1

CSS 九种办法实现居中

[复制链接]

3063

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138976
发表于 2024-6-30 09:34:23 | 显示全部楼层 |阅读模式

grid 布局

办法

父元素运用 grid 布局,而后加上align-items:center;justify-items:center;

<style> .box{ width:100px; height:100px; border:1px solid red; display:grid; align-items:center; justify-items:center; } .child{ bac公斤round:green; } </style> <div class="box"> <div class="child">奥特曼</div> </div>

https://jsbin.com/tasucaruya/edit?html,output

办法

父元素运用 grid 布局,给子元素加上margin:auto;

<style> .box{ width:100px; height:100px; border:1px solid red; display:grid; } .child{ bac公斤round:green; margin:auto; } </style> <div class="box"> <div class="child">奥特曼</div> </div>

https://jsbin.com/yokiwisura/edit?html,output

flex 布局

办法

父元素运用 flex 布局,而后加上justify-content:center;align-items:center;

<style> .box{ width:100px; height:100px; border:1px solid red; display:flex; justify-content:center; align-items:center; } .child{ bac公斤round:green; } </style> <div class="box"> <div class="child">奥特曼</div> </div>

https://jsbin.com/guyezuzewe/edit?html,output

办法

父元素运用 flex 布局,子元素加上margin:auto

<style> .box{ width:100px; height:100px; border:1px solid red; display:flex; } .child{ bac公斤round:green; margin:auto; } </style> <div class="box"> <div class="child">奥特曼</div> </div>

https://jsbin.com/gowokagiko/edit?html,output

绝对定位

办法

父元素运用相对定位,子元素运用绝对定位,而后给子元素加上left:50%;top:50%;transform:translate(-50%,-50%)

<style> .box{ width:100px; height:100px; border:1px solid red; position:relative; } .child{ bac公斤round:green; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) } </style> <div class="box"> <div class="child">奥特曼</div> </div>

https://jsbin.com/tezenomobe/edit?html,output

办法

父元素运用相对定位,子元素运用绝对定位,而后left:50%;top:50%;,在运用这种办法时最好写死子元素的宽高,这般能更准确的居中。而后加上marginleft:-1/2width;margin-top:-1/2height;

<style> .box{ height: 200px; border: 1px solid red; position: relative; } .child{ border:




上一篇:国内CSSCI期刊概况分析(经管类)兼举荐部分期刊
下一篇:CSS实现居中的各样办法
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-23 11:11:30 | 显示全部楼层
外贸论坛是我们的,责任是我们的,荣誉是我们的,成就是我们的,辉煌是我们的。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 15:36 , Processed in 0.109679 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.