margin:auto实现居中

来源：互联网发布：淘宝友邦电器城假货编辑：程序博客网时间：2024/06/06 08:12

方案一

.element {    width: 600px; height: 400px;    position: absolute; left: 50%; top: 50%;    margin-top: -200px;    /* 高度的一半 */    margin-left: -300px;    /* 宽度的一半 */}

这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得

方案二

.element {    width: 600px; height: 400px;    position: absolute; left: 50%; top: 50%;    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */}

兼容性不好，ie10以上才支持

绝对定位元素的居中实现

.element {    width: 600px;    height: 400px;    position: absolute; left: 0; top: 0; right: 0; bottom: 0;    margin: auto;    /* 有了这个就自动居中了 */}

代码两个关键点：

上下左右均0位置定位；
margin: auto

上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。

+++++++++++++++++++++++++++++++++

以上是从网上看到的信息。经过测试发现

上面代码的，如果需要居中的元素自身不包含尺寸则出现不同的现象。

1.width 和 height属性都不写，没有居中效果。如果heigth属性被定义为height:0;是可以实现上下居中的。

2.width如果不写的话，元素是满屏显示，上下居中。

3.如果定义了width,height 属性，元素就会上下左右居中显示

4 table 不设置宽和高。只实现了上下居中

0 0