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流星雨背景的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2019-08-01
  • css实现5种滚动吸顶实现方式的比较(性能升级版)

    这篇文章主要介绍了css实现5种滚动吸顶实现方式的比较(性能升级版),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2019-07-31
  • 你可能需要这样的大屏数字滚动效果

    这篇文章主要介绍了你可能需要这样的大屏数字滚动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2019-07-29
  • css 设置overflow:scroll 滚动条的样式

    这篇文章主要介绍了css 设置overflow:scroll 滚动条的样式 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-25
  • flex-grow、flex-shrink、flex-basis和九宫格布局理解

    这篇文章主要介绍了flex-grow、flex-shrink、flex-basis和九宫格布局理解的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要
    2019-07-25
  • CSS 辐射渐变背景 radial-gradient的实现

    这篇文章主要介绍了CSS 辐射渐变背景 radial-gradient的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2019-07-24
  • css中zoom:1属性的定义和作用

    这篇文章主要介绍了css中zoom:1属性的定义和作用,需要的朋友可以参考下
    2019-07-24
  • css 中background 设置文本框背景图 的方法

    这篇文章主要介绍了css 中background 设置文本框背景图 的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-22
  • 如何只使用CSS创建折叠标题效果的示例代码

    这篇文章主要介绍了如何只使用CSS创建折叠标题效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2019-07-15
  • css轻松实现固定比例的块级容器

    这篇文章主要介绍了css轻松实现固定比例的块级容器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2019-07-12

最新评论