css绝对定位如何居中？css绝对定位居中的四种实现方法

喜欢ヅ旅行 2023-02-21 12:53 30阅读 0赞

在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。

### **[打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）][web]** ###

css绝对定位居中的实现方法有很多，下面将给大家介绍css绝对定位居中的四种方法。

1、兼容性不错的主流css绝对定位居中的用法：

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

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

2、css3的出现，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样实现css绝对定位居中：

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

3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

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

4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

[web]: https://zhuanlan.zhihu.com/p/138726269

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关绝对定位水平垂直居中（HTML、CSS）

绝对定位水平垂直居中（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

电玩女神/ 2023年10月03日 13:24/ 0 赞/ 23 阅读

相关 CSS绝对定位(css绝对定位的写法)

网页制作中怎么用CSS样式定位图片的位置就简单的图片定位是吧，我给你个范例，然后你参考下。 ![Image 1][] 上面DIV中STYLE里CENTER是图片居中

￡神魔★判官ぃ/ 2023年09月26日 13:56/ 0 赞/ 19 阅读

相关 CSS绝对定位，相对定位

CSS绝对定位，相对定位 1、在绝对定位上显示内容(在要显示的内容上面设置相对定位) <image class="back" src="../../../../

心已赠人/ 2023年07月06日 08:59/ 0 赞/ 34 阅读

相关 css绝对定位如何居中？css绝对定位居中的四种实现方法

在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 [

喜欢ヅ旅行/ 2023年02月21日 12:53/ 0 赞/ 31 阅读

相关 css中的绝对定位

今天来讲css中绝对定位：绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的 \{position:absolute;\} 1. 情况一：没有父盒子，即父盒子

我不是女神ヾ/ 2023年01月10日 14:33/ 0 赞/ 206 阅读

相关 css绝对定位的三种方法

1、兼容性不错，但是需要提前知道元素的高度宽度，往往需要通过JS获取 .content { position: absolute; top: 5

Dear 丶/ 2022年11月20日 01:58/ 0 赞/ 193 阅读

相关 css 通过绝对定位实现水平垂直居中

知识点： margin: auto; 效果图： ![70][] 代码： html: <div class="outer"> <div

r囧r小猫/ 2022年05月13日 11:40/ 0 赞/ 282 阅读

相关 css position: fixed; 垂直居中,绝对定位居中

.boxout{ background:fff; z-index: 111;===display:none; box-shadow: 0

缺乏、安全感/ 2021年09月26日 01:26/ 0 赞/ 535 阅读

相关 css 绝对定位

position的四个属性值： 1. relative 2. absolute 3. fixed 4. static 下面分别讲述这四个属性。 <div id="

小灰灰/ 2021年05月12日 11:50/ 0 赞/ 553 阅读

相关【CSS】DIV浮动层绝对居中定位

下面的写法兼容IE系列浏览器和火狐浏览器。详细解说，直接看样式： #dingwei{padding:10px;background-color:#003300;co...

测试账号/ 2021年01月10日 05:46/ 0 赞/ 805 阅读