css让一个div绝对居中

最新推荐文章于 2025-06-06 22:51:36 发布

yaojie.yao

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量692

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/listStyleScript/article/details/104861282

css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了六种使用CSS让div绝对居中的方法，包括：1) 利用父相子绝定位；2) 使用margin: auto; 3) 弹性盒子布局；4) CSS3的transform属性；5) 文本居中方法；6) 通过JS计算定位。部分方法在低版本IE浏览器中不兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css让一个div绝对居中

   <!-- html页面 -->
<body>
  <div>
  </div>
</body>

方法1

  /* css */
   html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background-color: bisque;
            position: relative;
        }
        div{
            background-color: aqua;
            width: 80px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -40px;
            margin-top: -100px;
        }

该方法利用css中父相子绝,让div根据body来进行定位(不加 position: relative;相对定位的话,默认也会相对body来进行定位). left: 50%; top: 50%;会使该div左上角在页面中间.加上 margin-left: -40px; margin-top: -100px;就形成了绝对居中. 该方法适用于宽高都确定的情况下

方法2

  /* css */
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            background-color: bisque;
            position: relative;
        }

        div {
            background-color: aqua;
            width: 80px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

该方法是将元素完全脱离文档流使用margin: auto;将div上下,左右都完全居中;

方法3

  /* css */
        html,
        body {
            height: 100%;
            
        }

        body {
            margin: 0;
            background-color: bisque;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div {
            background-color: aqua;
            width: 80px;
            height: 200px;
        }

该方法利用的css3的弹性盒子使横轴以及纵轴都达到了居中的效果 IE10及其以下版本都不兼容

方法4

   /* css */
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            background-color: bisque;
            position: relative;
        }

        div {
            background-color: aqua;
            width: 80px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

该方法利用的css3中 transform属性中translate(-50%, -50%)进行的一个2D的转换,达到了居中的效果
IE10及其以下版本都不兼容

方法5

 /* css */
 body {
           margin: 0;
           background-color: bisque;
           width: 2000px;
           height: 1000px;
           display: table-cell;
           text-align: center;
           vertical-align: middle;
        }

        div {
            background-color: aqua;
            width: 80px;
            height: 200px;
            display: inline-block;
        }

该方法利用文本居中,(不常用).而且必须要有绝对的宽和高百分比的宽高也不可以

方法6

     //  基本样式的设定
    // box代表div
     box.style.width = '80px'
     box.style.height = '200px'
     box.style.background = ' aqua'
     document.body.style.position = 'relative'
     document.body.style.background = 'bisque'

     let htm = document.documentElement
     let htmWidth = htm.clientWidth
     let htmHeight = htm.clientHeight

     let boxW = box.clientWidth
     let boxH = box.clientHeight

     box.style.position = 'absolute'
     box.style.left = (htmWidth-boxW)/2 +'px'
     box.style.top =( htmHeight-boxH)/2 +'px'