前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >css让div居中显示_css页面居中

css让div居中显示_css页面居中

作者头像
全栈程序员站长
发布于 2022-11-17 03:02:37
发布于 2022-11-17 03:02:37
10.4K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

css中设置div元素居中显示的四种方法


一、先确定div的基本样式

先给div随便设置些基本的样式,这样所得到的结果容易看出效果。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
css结构:
<style type="text/css"> *{ 
 margin: 0; height: 0; } .warp{ 
 width: 500px; height: 500px; background-color: pink;//给个背景,结果更清晰 margin: 50px auto; } .warp .box{ 
 width: 200px; height: 200px; background-color: green; } </style>
HTML结构:
<div class="warp">
<div class="box"></div>
</div>

二、具体实现方法

第一种:利用子绝父相和margin: auto实现

给父级div设置相对定位,子元素div设置绝对定位,left、right、top、bottom都设置为0,然后将margin设置为auto即可实现。

注意:子绝父相就是 父级元素相对定位,子级元素绝对定位

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
position:relative;//设置为相对定位
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
position:absolute;//设置为绝对定位
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
第二种:利用子绝父相和过渡动画tranform实现

给父级div设置相对定位,子元素div设置绝对定位,将left、top设置为50%;然后设置transform: translate(-50%,-50%);即可实现。

原理:设置了left: 50%;top:50%; 之后,子元素位于如图所在位置,

此时,我们需要向左移动子级div宽度的一半,子级div所在位置如图所示

向上移动子级div高度的一半,结果如图所示

transform: translate(-50%,-50%);

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
position:relative;//设置为相对定位
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
position:absolute;//设置为绝对定位
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第三种:同样是利用子绝父相和margin负值实现

子级div设置绝对定位,同样设置left: 50%; top: 50%,然后利用margin值为负时,产生的相反位移(同上过渡动画tranform产生位移类似)。即margin-left:calc(-div自身宽度/2),margin-top:calc(-div自身高度/2),也可以自己计算margin-left 和 margin-top的值。

注意:calc()函数,CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
position:relative;//设置为相对定位
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
position:absolute;//设置为绝对定位
left: 50%;
top: 50%;
margin-left:calc(-200px/2);
margin-top:calc(-200px/2);	
}
第四种:利用flex弹性盒布局实现

给父级div设置display: flex;将父级div元素转为弹性盒,然后设置主轴对齐方式为居中 justify-content: center;,侧轴对齐方式为居中 align-items: center;即可实现。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213942.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【前端】CSS定位
定位是网页布局的一个重要组成部分,用于控制 HTML 元素在页面中的显示位置。通过控制元素的位置,我们可以更好地实现页面的交互和美观设计。
CSDN-Z
2025/06/01
940
【前端】CSS定位
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
CSS3 中的 Transform 转换 , 可以实现 标签元素 的 位移 / 旋转 / 缩放 ;
韩曙亮
2023/04/24
1.1K0
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
html元素【垂直水平居中】方法合集
子元素的左上角会被定位到父元素中心,这个时候再利用(负margin/负translate/cale函数)将子元素的中心校准到父元素的中心。
心念
2023/01/11
2.1K0
CSS进阶内容—浮动和定位详解
当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园
秋落雨微凉
2022/10/25
2.3K0
CSS进阶内容—浮动和定位详解
CSS3 positon定位详解(通俗易懂)
positon定位一共有四种,分别是static静态(默认),relative相对,fixed固定,absolute绝对定位,以及sticky粘性定位。
坚毅的小解同志的前端社区
2022/11/28
4870
CSS3 positon定位详解(通俗易懂)
【CSS3】 float浮动与position定位常见问题(个人笔记)
[前端CSS高频面试题]如何画0.5px的边框线(详解) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会) CSS3 Z—Index 详解 CSS3 positon定位详解(通俗易懂)
坚毅的小解同志的前端社区
2022/11/28
5790
【CSS3】 float浮动与position定位常见问题(个人笔记)
Day6:html和css
Day6:html和css 复习 达叔与他的朋友们-复习.png margin: 0; padding: 0; 效果 <!DOCTYPE html> <html lang="en"> <head>
达达前端
2019/07/03
4740
Day6:html和css
水平居中和垂直居中
本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</title> <meta charset="utf-8"> </head> <style type="text/css"> .box { /* 在一个基础的盒子里面显示效果 */ position: relative; float: left; width: 250px; h
echobingo
2018/04/25
3K0
水平居中和垂直居中
CSS中关于元素居中的方法总结(超全)
css中一个很重要的问题,就是关于元素的居中,包括水平居中,垂直居中,本文就是为大家总结了:css中对于行内元素与块级元素不同的居中方法.
用户9914333
2022/07/21
3.5K0
(2019)[前端]面试题[6]:水平垂直居中方法
如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。
无道
2019/11/13
7010
(2019)[前端]面试题[6]:水平垂直居中方法
CSS 定位布局 - 相对、绝对、固定三种定位
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
Devops海洋的渔夫
2019/05/31
3.7K0
CSS绝对定位7大应用场景实战案例分享
今天我们来分享web前端CSS定位中的position:absolute绝对定位的应用场景案例的相关场景!
艾编程
2022/12/09
1K0
CSS绝对定位7大应用场景实战案例分享
前端开发中各类型居中方式总结
前端开发中经常用到的就是元素居中,有时候不同的元素居中方式不同就忘记了,明明已经设置了居中,但却没有效果,搞得人很懵逼,还得去搜索一下,所以今天总结了一下,方便以后查用。
岳泽以
2022/10/26
6350
前端开发中各类型居中方式总结
前端学习(14)~css学习(八):定位属性
如果想做“压盖”效果(把一个div放到另一个div之上),我们一般不用相对定位来做。相对定位,就两个作用:
Vincent-yuan
2020/03/19
1K0
HTML & CSS页面布局之定位
默认情况下,HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素,行内元素,行内块级元素,他们的特性是块级独占一行,行内和行内块级可以在一行内共存,这些特性都是针对标准流的。总结一下就是,标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版,如果元素是行内元素/行内块级元素, 那么就会水平排版。
用户5997198
2020/05/12
5.8K0
<布局>子级相对级居中对齐的几种方式
一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50%, -50%), 如果知道子元素的宽高, 也
zhaoolee
2018/04/19
1.5K0
<布局>子级相对级居中对齐的几种方式
前端常用布局方案总结
若元素为行内块级元素,可以通过为其父元素设置text-align: center 实现水平居中。
越陌度阡
2022/05/06
2.8K0
前端常用布局方案总结
CSS布局(二)
添加 padding-bottom后,如上图所示,此时的父元素的高度就是高度最大的子元素的高度,即上面第一个子元素的高度
赤蓝紫
2023/03/11
1.1K0
CSS布局(二)
【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;
韩曙亮
2023/04/16
9890
【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
css水平垂直居中各种方法实现方式
margin 可以有4个值,分别对应影响的方向是上,右,下,左, 2个值的时候,对应第一个值是 控制上下距离,第二个值是控制左右, 所以magrgin:0 auto, 就是上下距离为0,auto是自适应,这里指的是左右两个方向的距离一样,也就是说,不论你的宽度怎么变化,都是两个方向距离一样,形成居中。
肥晨
2023/04/04
5840
相关推荐
【前端】CSS定位
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验