html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示:
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
如上的两个div,实现div2在div1里面是居中显示
一、方法一
利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30
div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div22{
margin-left: 30px;margin-top: 30px;
}
二、方法二
利用css的 position属性,把div2相对于div1的top、left都设置为50%,然后再用margin-top设置为div2的高度的负一半拉回来,用marg-left设置为宽度的负一半拉回来,css如下设置
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
三、方法三
还是用css的position属性,如下的html
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
四、方法四
利用css3的新增属性table-cell
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
这个方法还有一个好处就是,div2的高度可以不固定,如下
demo
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
div居中方法
总结
以上所述是小编给大家介绍的CSS实现DIV居中的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html div 居中心,CSS实现DIV居中的三种方法相关推荐
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
- 让图片在div里居中(三种方法)
问题 当我们将一张 img 放在 一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div.所以,产什么以下解决方法. 解决方法 布局文件代码 <div class=&quo ...
- CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
- html中页面整体居中,css实现网页内容整体居中的三种方法总结
下面我们来看一款利用css实现div中内容居中的方法,下面整理了三种css实现网页内容整体居中方法,希望对各位朋友会有所帮助. 例 代码如下 复制代码 -//W3C//DTD XHTML 1.0 Tr ...
- css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
- HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
- html+css两栏布局的三种方法
一. 1. 左边div设置float:left 或者position: absolute 脱离文档流 2. 避免左边div遮住右边div,右边div设置margin-left:左边div的宽度 < ...
- CSS改变图片颜色的三种方法
一.filter: drop-shadow(). 设置图片的阴影 <div class="img_box"><img /></div> //cs ...
最新文章
- tensor和模型 保存与加载 PyTorch
- java代码(dex)注入
- 毕业设计:基于SSM实现新生报道系统
- cxGRID能否对模板进行保存
- 07_数据库创建,添加c3p0操作所需的jar包,编写c3p0-config.xml文件,编写User.java,编写jdbcUtils.java实现操作数据库的模板工具类,UserDao编写,Dao
- java不要无限循环_java – 看似无限循环终止,除非使用System.out.println
- 设计模式(6)——抽象工厂模式(Abstract Factory Pattern,创建型)
- httplistener java_Java监听器listener的介绍
- Memcached源码分析之memcached.h
- Elasticsearch 磁盘使用率超过警戒水位线,怎么办?
- RDP报表快速打造数据大屏可视化展示系统
- python的socket
- python 文字转语音 带情感_Python文字转换语音,让你的文字会「说话」抠脚大汉秒变撒娇萌妹...
- 抓包工具--Fiddler
- Cesium常用事件,包括点击事件,鼠标事件,相机移动事件
- PHP输出一段励志的话,100句关于励志的话,青春励志的话,写得好的励志句子
- 4Gwifi无线远程非接触红外测温传感器mqtt/http推送数据
- 数字化为何具有颠覆性?
- apicloud 心得 绝对路径
- OpenV2X 车路协同开源平台 Columbia 版本正式发布!