css怎么让div整体居中(CSS实现DIV居中的三种方法)
类别:Web前端 浏览量:1211
时间:2022-03-28 01:09:23 css怎么让div整体居中
CSS实现DIV居中的三种方法下面给大家分享li居中的实现代码,具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; height: 40px; background-color: green;} </style> <li class="li1"> <li class="li2"> </li> </li> </body> </html>
如上的两个li,实现li2在li1里面是居中显示
一、方法一
利用margin,li1的宽减去li2的宽就是li2margin-left的数值:(100-40)/2=30
li1的高减去li2的高就是li2margin-top的数值:(100-40)/2=30
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; height: 40px; background-color: green;} .li22{ margin-left: 30px;margin-top: 30px; } </style> <li class="li1"> <li class="li2 li22"> </li> </li> </body> </html>
二、方法二
利用css的 position属性,把li2相对于li1的top、left都设置为50%,然后再用margin-top设置为li2的高度的负一半拉回来,用marg-left设置为宽度的负一半拉回来,css如下设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; height: 40px; background-color: green;} .li11{ position: relative; } .li22{ position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px; } </style> <li class="li1 li11"> <li class="li2 li22"> </li> </li> </body> </html>
三、方法三
还是用css的position属性,如下的html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; height: 40px; background-color: green;} .li11{ position: relative; } .li22{ position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0; } </style> <li class="li1 li11"> <li class="li2 li22"> </li> </li> </body> </html>
四、方法四
利用css3的新增属性table-cell
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; height: 40px; background-color: green;} .li11{ display: table-cell;vertical-align: middle; } .li22{ margin: auto; } </style> <li class="li1 li11"> <li class="li2 li22"> </li> </li> </body> </html>
这个方法还有一个好处就是,li2的高度可以不固定,如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .li1{ width: 100px; height: 100px; border: 1px solid #000000;} .li2{ width:40px ; background-color: green;} .li11{ display: table-cell;vertical-align: middle; } .li22{ margin: auto; } </style> <li class="li1 li11"> <li class="li2 li22"> li居中方法 </li> </li> </body> </html>
总结
以上所述是小编给大家介绍的CSS实现li居中的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- css水平或者垂直居中的写法(深入理解CSS行高line-height与文本垂直居中的原理)
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- 前端单行文本垂直居中(移动端的text-overflow多行文本溢出显示省略号…)
- 块级元素水平垂直居中
- css如何让浮动元素水平居中
- 让文字居中代码是多少(如何使定义了高度和宽度的< a >里的文字垂直居中实现代码)
- css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
- css垂直居中16个方法(css实现元素垂直居中的常用方法总结)
- html怎么使用css居中(HTML+CSS实现单列布局水平居中布局)
- margin auto 实现居中,与text-align:center的区别
- div内容水平垂直居中的方法(不定宽高的文字在div中垂直居中实现方法)
- css垂直居中图解(全面总结使用CSS实现水平垂直居中效果的方法)
- css怎么让div整体居中(CSS实现DIV居中的三种方法)
- css如何让图片居中
- cssdiv垂直居中怎么设置(CSS设置DIV垂直居中的N种方法 兼容IE浏览器)
- css垂直居中
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
热门推荐
- 判断iframe是否加载完成
- extjs anchor 锚点布局
- docker常用命令详解(docker常用命令总结推荐)
- pandas字符串和数字(使用pandas把某一列的字符值转换为数字的实例)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- sql取值唯一的方法(SQL 获取所有上级的实现方法)
- python 怎么解析中文(Python中一般处理中文的几种方法)
- dedecms关闭站点(dedecms搬家后出现/include/templets/default/index.htm Not Found!解决方案)
- SQL Server遍历表中记录的方法
- python弹跳小球(python GUI实现小球满屏乱跑效果)