外链论坛

 找回密码
 立即注册
搜索
查看: 100|回复: 3

css水平垂直居中的几种方式

[复制链接]

2840

主题

316

回帖

9191万

积分

论坛元老

Rank: 8Rank: 8

积分
91919690
发表于 2024-6-30 05:27:07 | 显示全部楼层 |阅读模式

在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式:

方式一:将容器设置为弹性容器,即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中对齐</title> <style> body{ font-size: 30px; min-height: 100vh; bac公斤round-color: aqua; display: flex; align-items: center;/*垂直方向居中*/ justify-content: center;/*水平居中*/ } /* #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; } */ </style> </head> <body> <div id="center">水平垂直居中</div> </body> </html>

这个方式论子元素是不是设置width和height,都可行!

方式二:子元素设置固定的width和height,运用绝对定位进行居中设置:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中对齐</title> <style> body{ font-size: 30px; min-height: 100vh; bac公斤round-color: aqua; position: relative; } /* 子元素设置详细的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style> </head> <body> <div id="center">水平垂直居中</div> </body> </html>

是:

/* 子元素设置详细的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; }

运用css3中的变换属性:

/* 子元素设置详细的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }




上一篇:CSS3 垂直居中实现办法
下一篇:CSS实现水平垂直居中(多办法)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-31 11:27:33 | 显示全部楼层
谢谢、感谢、感恩、辛苦了、有你真好等。
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-9-30 10:01:02 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

3132

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968646
发表于 4 天前 | 显示全部楼层
期待与你深入交流,共探知识的无穷魅力。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 23:22 , Processed in 0.120726 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.