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中grid属性的使用详解

    这篇文章主要介绍了css中grid属性的使用详解的相关资料,详细的介绍了grid属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-26
  • 纯css实现Material Design中的水滴动画按钮

    这篇文章主要介绍了纯css实现Material Design中的水滴动画按钮的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-26
  • Flexbox 布局的最简单表单的实现

    弹性布局(Flexbox)逐渐流行,越来越多人使用,本文章主要介绍了Flexbox 布局的最简单表单的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过
    2018-10-25
  • 详解关于flex-shrink如何计算的冷知识

    本篇文章给大家带来的内容是关于flex-shrink如何计算?flex-shrink的计算方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助
    2018-10-25
  • 详解flex多列布局遇到的问题和解决方案

    flex布局无疑是简单、易用的,他让我我们的布局更加简单和快速,这篇文章主要介绍了详解flex多列布局遇到的问题和解决方案 ,非常具有实用价值,需要的朋友可以参考下
    2018-10-24
  • 使用css实现物流进度的样式的实例代码

    本文通过实例代码给大家介绍了使用css实现物流进度的样式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-10-23
  • css实现中间文字两边横线效果

    这篇文章主要介绍了css实现中间文字两边横线效果 ,需要的朋友可以参考下
    2018-10-23
  • CSS设置背景模糊的实现方法

    这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-22
  • css实现“加号”效果的实例代码

    这篇文章主要介绍了css实现“加号”效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-22
  • css flex几种多列布局

    这篇文章主要介绍了css flex几种多列布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-19

最新评论