博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
阅读量:4839 次
发布时间:2019-06-11

本文共 1799 字,大约阅读时间需要 5 分钟。

大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。

如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现。

1.先来看看宽度不固定的div如何设置水平居中:

 
   
1
2
3

 

无固定宽度的div水平居中代码要点:

这种div宽度不固定的情况,常见于分页处,由于分页不确定有多少页,所以用于分页的元素所在的容器宽度通常不是固定的。

父容器container加css属性 text-align:center;子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack,针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout,使其haslayout。

2.再看看高度不固定的div如何设置垂直居中:

 
我们垂直居中了,我们水平居中了

 

无固定高度的div垂直居中代码要点:

父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;


我们看看宽度高度不固定的div垂直居中和水平居中的实例:

 
         
无标题文档
我们垂直居中了,我们水平居中了,真的是可以居中的吗,
你信不信我反正是新了
美浩工作室是一个90后团队,网站建设设计为一体的一个
年轻化互联网团队!

 

 

代码要点:

父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的话,需要注释掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;

那如果宽和高都固定了怎么水平垂直居中呢?且看下面代码:

宽度高度固定的div垂直居中和水平居中实例:

 
         
无标题文档
美浩工作室测试固定高宽div
居中了

 

代码要点

父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位,top:50%;left:50%;margin-top,margin-left的值取该容器高度,宽度的一半的负值。

转载于:https://www.cnblogs.com/lulu-beibei/p/4519947.html

你可能感兴趣的文章
node入门学习(二)
查看>>
通过js禁止输入空格(试用场景:当用字符串拼接插入dom节点时,onkeyup这些方法都不好使可用这个)...
查看>>
Codeforces Edu Round 48 A-D
查看>>
C++cctype软件包函数摆脱,ASCII码!
查看>>
saltstack笔记
查看>>
(转载)TP5_自定义分页样式
查看>>
Spring3.2 和 jdk8 运行时有冲突
查看>>
WordPress4.1新的函数介绍
查看>>
list<T> 排序
查看>>
结对2.03
查看>>
【vue】vue如何创建一个项目
查看>>
简单的linux压力测试工具webbench
查看>>
ImageLunBo_shape+XML
查看>>
php实现设计模式————单例模式
查看>>
Python OOP(面向对象编程)
查看>>
MySQL安装与测试
查看>>
使用JDK自带的VisualVM进行Java程序的性能分析
查看>>
mysql语句记录
查看>>
总结面试题
查看>>
Win8AX博客园应用隐私声明
查看>>