关于的居中

上午遇到了一个问题，<div>里面的<dl>无法居中。

给<dl>添加样式align:center 、align-self:center等等都试过了都不管用。

上网百度了下，有建议说：

给dl添加一个类.center{margin:0 auto;width:100px;height:100px;}给外面的div加一个类或者ID 总之是给外面的div加一个宽度，比如.div{width：500px;height：500px;}
<div class=“div”>
    <dl class="center">
        <dd>...</dd>
        <dd>...</dd>
    <dl>
</div>

也试过了，同样不行。

于是自己就一点点修改样式，刷新页面，终于找到了解决办法：

在css中dl的样式里   margin: auto;（不要带0）

成功居中。

后记：思考了一下原因，原来是子元素中设置了float:left;在作怪，删掉之后margin:0 auto;正常操作。

顺便复习一下边距问题：

margin 外边距

border 边框

padding 内边距

一张图来说话：

附带一个别人的position居中方法（具体链接：http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html）特此表示感谢：

万能的position大法

 

这个方法可以说真的是万能的。当你为一个元素无法居中而困扰的时候，可以果断的使用他，而且几乎没有后遗症，绝对是前端工程师们居家旅行必备的手段之一。

 

具体的做法很简单，首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width，这个似乎是必须的

，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;

margin- left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上这样的css（当然，父元素也要先写上width和height）

{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}

 

接下去就刷新页面吧，你的子元素已经是居中显示了。

 

使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了。