CSS零碎知识点（2）——居中DIV盒子

最新推荐文章于 2022-11-18 18:23:56 发布

二木成林

最新推荐文章于 2022-11-18 18:23:56 发布

阅读量886

点赞数

分类专栏： # CSS零碎知识点文章标签： css

本文链接：https://blog.csdn.net/cnds123321/article/details/109013432

版权

CSS零碎知识点专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有如下一个HTML，但里面的DIV盒子没有居中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

为该DIV盒子设置样式如下：

/* 居中0 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中1 */

即居中

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>