CSS中怎么让DIV水平居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,

网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.

text-align:center;这个属性不是让div居中的，是让div中的内容居中,

当我们想让一个容器中的div水平居中其实方法很简单只需定义margin就行了，即margin:0 auto;然后你的div就水平居中了。

如下代码例子：

box2在box1中水平居中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>div居中问题</title>
  <style type="text/css">
   .box1{
    width:1000px;
    height: 700px;
    background-color:blue;
   }
   .box2{
    width:666px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
   }
  </style>
</head>
<body>
  <div class="box1">
   <div class="box2"></div>
  </div>
</body>
</html>

转载于:https://www.cnblogs.com/ElseYZ/p/4106182.html

CSS中怎么让DIV水平居中相关推荐

HTML+CSS中文字两边线水平居中且两边对齐
HTML+CSS中文字两边线水平居中且两边对齐 HTML+CSS想要文字两边出现水平居中的线且根据盒子的宽度两边对齐,水平居中, 这样的话可以用这样伪类来实现效果. <CSS部分> .t ...
css中如何使div元素居中垂直水平居中
html <div class="box"><div class="box1"></div> </div> 方法 ...
CSS中怎么让DIV居中
CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
css中图片在div中的位置,纯CSS实现任意图片在div中垂直居中
在苦逼的前端领域,相信许多CSS新手都遇到过图片垂直居中的问题,今天我们就来分享一种实现图片垂直居中的CSS方法. 话不多说,先直接贴上代码: div{ border:1px solid #ccc; ...
css中显示隐藏div层,JS CSS 显示隐藏DIV 层
匿名用户 1级 2011-01-12 回答调整了下标签的位置一般js要放在css后面最好js放在dom最后,等待dom解释完毕再执行js代码无标题文档 #div1{ border:1px #0 ...
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}
html中div的覆盖,CSS中如何使div覆盖另一个div的实例
将一个p覆盖在另一个p上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 #p1{positio ...
CSS中div的浮动float
------------------------------CSS中div的浮动float----------------------------------- HTML页面的标准文档流(默认布局)是 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
CSS中!important的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22)http://www.cnblogs.com/yudy/archive/2013/05/27/ ...

CSS中怎么让DIV水平居中

CSS中怎么让DIV水平居中相关推荐

最新文章

热门文章