absolute之实现居中的三种方式

绝对定位（absolute）是CSS中最常用的定位方式之一，在网页布局中经常用来实现元素的定位和居中。但是，绝对定位本身只是规定元素相对于它的父元素进行定位，如果父元素不是定高定宽的话，实现元素居中就会变得非常困难。因此，本文将会介绍三种不同的基于绝对定位的居中方式，希望能对大家有所帮助，同时也从中了解更多关于CSS方面的知识。

方法一、绝对定位+margin负值

这种方式是最常见的一种方式，它的原理就是利用绝对定位把元素的宽高减去父元素的宽高，再通过margin负值把元素居中，下面是代码：

HTML：

```

```

CSS：

```

.parent{

position: relative;

width: 100%;

height: 100%;

}

.child{

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 100px;

margin-top: -50px;

margin-left: -100px;

}

```

在这个例子中，父元素设置了position:relative，并且指定了宽高为100%，子元素的position属性设置为absolute，并且调整了宽高为200px x 100px。在子元素中，将top和left属性值设置为50%，这时它就跳到了父元素的中心位置，但是它的左上角仍然是在父元素的中心位置，所以需要通过margin-left和margin-top将元素的中心调整为父元素的中心。

优点：这种方法简单易懂，适用范围广泛，可以适用于各种宽高比例的元素，并且兼容性好。

缺点：当元素宽高比例发生变化时，需要重新计算样式中的margin值，如果使用Sass或Less等CSS预处理器可以简化计算过程，但是仍然需要手工实现。

方法二、绝对定位+transform平移

这种方式也是利用绝对定位将元素移动到父元素的中心位置，不同的是这里使用了transform属性，通过translate属性值使得元素在父元素中心位置正好居中，这时不需要再手动计算中心点的位置。下面是代码：

HTML:

```

```

CSS：

```

.parent{

position: relative;

width: 100%;

height: 100%;

}

.child{

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 100px;

transform: translate(-50%,-50%);

}

```

在这个例子中，父元素和子元素的样式与方法一中的样式一致，在子元素中增加了transform属性，值为translate(-50%,-50%)，这里的-50%是相对于元素本身的50%进行计算，它的作用是将元素平移回半个宽度和半个高度，这时子元素的中心点就会与父元素的中心点重合。

优点：这种方式实现简洁，计算比较容易，适用于不同宽高比例的元素，并且兼容性也很好。

缺点：由于使用了transform属性，对内存和性能的影响较大，尤其在移动设备上使用时需要特别注意。

方法三、绝对定位+display:flex

这种方式是利用CSS3中的flexbox布局实现的，首先在父元素上设置display:flex，然后再通过justify-content和align-items属性调整子元素的位置。下面是代码：

HTML:

```

```

CSS：

```

.parent{

display: flex;

justify-content: center;

align-items: center;

}

.child{

width: 200px;

height: 100px;

}

```

在这个例子中，父元素设置了display:flex，并且设置了justify-content: center和align-items:center，这意味着子元素会在父元素中心位置水平和垂直都居中。子元素的宽高就可以自己设定，不需要手动计算，这大大简化了样式的实现过程。

优点：这种方法非常简单明了，在样式实现过程中不需要计算偏移量，可以适用于不同宽高比例的元素，并且flexbox布局在现代浏览器中已经非常成熟和普及，兼容性也很好。

缺点：由于需要支持现代浏览器，如果需要兼容IE9及以下版本的浏览器，就需要使用其他方法。

总结：

以上三种方式都是基于绝对定位实现的，都可以适用于不同宽高比例的元素，并且都有一定的缺陷，需要针对实际情况进行选择。其中第三种方式使用flexbox布局，是一种非常推荐的实现方式，在实际开发中，建议优先考虑使用flexbox实现元素居中，这样可以避免手动计算位置和兼容性问题，同时也可以享受到更加强大的布局功能。

补充：

在实现元素居中时，还有一种方法是通过grid布局实现，只需要在父元素上设置display:grid和justify-content:center,align-items:center就可以轻松实现居中，但是由于grid布局目前在兼容性方面的问题尚未得到完全解决，因此在实际开发中一般不会使用。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！