正文

css绝对定位元素实现居中的几个方法

IP云
IP云V管理员/24 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：CSS绝对定位元素left设为50%实现水平居中


绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可 。示例：
[css]
代码如下: 

#board{

width:60%;

padding:3%;

background:#09F;

position:absolute;

top:0px;

left:50%;

margin-left:-30%;

}

这样就能使得一个蓝色区域水平居中 


 
二、绝对定位元素的完全居中实现

如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。

兼容性不错的主流用法是： 

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    margin-top: -200px;    /* 高度的一半 */

    margin-left: -300px;    /* 宽度的一半 */

}

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

CSS3的兴起，使得有了更好的解决方法，就是使用 transform 代替 margin . transform 中 translate 偏移的百分比值是相对于自身大小的，于是，我们可以： 

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */

}

于是乎，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的。

然，问题很明显，兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。

实际上，绝对定位元素的居中实现还有另外一种方法，可以说是权衡了上面的尺寸自适应以及兼容性的一个方案，其实现的核心是 margin:auto .

三、margin:auto实现绝对定位元素的居中

首先，我们来看下CSS代码： 

.element {

    width: 600px; height: 400px;

    position: absolute; left: 0; top: 0; right: 0; bottom: 0;

    margin: auto;    /* 有了这个就自动居中了 */

}

代码两个关键点：

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

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

以前从未用过这种方法的我想试试，看看这种”完全居中”的方法到底有多么神奇。 好处：

  • 跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
  • 无特殊标记，样式更精简
  • 自适应布局，可以使用百分比和最大最小高宽等样式
  • 居中时不考虑元素的padding值（也不需要使用box-sizing样式）
  • 布局块可以自由调节大小
  • img的图像也可以使用

同时注意：

  • 必须声明元素高度
  • 推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题
  • 这种方法在Windows Phone上不起作用

    • 在研究了规范和文档后，我总结出了“完全居中”的工作原理：

  1. 在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。

W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

2. 设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

3. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了 position: relative; 样式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

4. 给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

使用“完全居中”，有意遵照了标准margin: auto; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。

完全居中”并不是本篇文章中唯一的选项。要做到垂直居中，还存在着其他方法，各有各的长处。采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。

相关阅读

目录[+]