div水平垂直居中的完美解决方案

  发布时间:2010-07-08 02:08:42   作者:佚名   我要评论

很多情况需要用到div的居中,下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。
让div居中对齐
使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子:



提示:您可以先修改部分代码再运行

注意,需要加上上面的那句

才能生效,要是不想要这句的话,也可以给body加一个属性:
body{text-align:center;}

另外,让div内的内容(包括文字及图片)居中的代码是: text-align:center;

div居中的完美解决方案! (水平垂直居中)
1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;



提示:您可以先修改部分代码再运行

相关文章

  • css 评分效果的星星示例

    这篇文章主要介绍了css 评分效果的星星示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-10
  • reset.css引入以及1px边框问题的解决方法

    这篇文章主要给大家介绍了关于reset.css引入以及1px边框问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面
    2018-07-10
  • 深入浅析CSS 选择器分组

    这篇文章主要介绍了CSS 选择器分组的相关资料,需要的朋友可以参考下
    2018-07-09
  • css画正六边形的两种方法

    本文给大家分享css画正六边形的两种方法,每种方法都不错,需要的朋友跟随脚本之家小编一起看看吧
    2018-07-06
  • CSS 设置滚动条样式的实例代码

    这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-06
  • 微信小程序 CSS filter(滤镜)的使用示例详解

    filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。接下来通过本文给大家介绍微信小程序 CSS filter(滤镜)的使用示例,感兴趣的朋友一起看看吧
    2018-07-06
  • CSS中有些属性的前面会加上“*”或“_”所代表的意思

    这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
    2018-07-06
  • 浅谈CSS中的尺寸单位

    这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙
    2018-07-05
  • css实现各种0.5px的线(小结)

    这篇文章主要介绍了css实现各种0.5px的线(小结),主要介绍了0.5px边框、0.5px圆角边框、0.5px左边线、0.5px右边线、0.5px底部线,小编觉得挺不错的,现在分享给大家,也给
    2018-06-28
  • css input[type=file] 样式美化(input上传文件样式 )

    这篇文章主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
    2018-06-20

最新评论