css 水平居中，垂直居中，自适应宽度的代码

一、宽度自适应的元素水平居中技巧详解

在网页布局中，我们经常需要将元素水平居中，尤其是那些宽度自适应的元素。这类元素可以是绝对定位、浮动元素或行内元素。而在日常布局设计中，行内元素的方式较少使用，因此我们主要关注绝对定位和浮动两种方案。

要实现元素的水平居中，我们自然会想到将其向左或向右移动一半的宽度。以图中所示为例，深绿色的元素需要在黑色的body中水平居中，并且是宽度自适应的。而亮绿色的多余DIV，就是为了帮助我们实现深绿色元素的水平居中。

以下是实现这一布局的代码：

我们使用float:left或position:absolute属性，使pos元素具有宽度自适应的特性。然后，我们将多余的DIV（亮绿色）水平移动50%，这可以通过margin-left或left属性来实现。紧接着，我们使其内容（深绿色）向右水平移动50%，但这次只能使用right属性。这样，深绿色的元素就会在黑色的body中居中了。

HTML代码如下：

```html

```

我们需要添加一些CSS样式来实现元素的居中效果：

```css

{ margin:0; padding:0;}

body{background:000000;}

.pos{float:left;margin-left:50%; background:33CC33; padding:10px;}

.boxA{position:relative;right:50%;background:096;}

```

外层的定位需要是自适应宽度的，可以选择使用float:left或position:absolute属性。而内层的定位则需要是自动100%宽度的（相对于外层而言）。并且，由于内层元素可能需要移动出外层范围，因此只能选择position:relative属性。通过这种方式，我们可以轻松地实现宽度自适应的元素水平居中效果。