未知高度和宽度元素上下左右居中

最新推荐文章于 2021-04-07 08:31:00 发布

fechild

最新推荐文章于 2021-04-07 08:31:00 发布

阅读量895

点赞数

分类专栏： css 文章标签： css 未知尺寸元素上下左右居中

本文链接：https://blog.csdn.net/cotexarm7/article/details/80000466

版权

css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
  <title>未知宽高元素水平垂直居中</title>
  <style type="text/css">
    .outer {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .inner {
      position: absolute;
      left: 50%;
      margin-left: -50%;
      top: 50%;
      margin-top: -50%;
    }
    .inner2 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">经济斤斤计较</div>
  </div>
</body>
</html>

在上述代码中，只有类名为inner2才能让实现让文字上下左右居中。原因在于margin-left和margin-top的值如果是百分比，则百分比的基数是离元素最近的包含框的宽度。而transform: translate(-50%, -50%)，中的百分比，相对的是元素本身的宽和高。所以，只有inner2才能实现元素的上下左右居中。

fechild

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
未知高度和宽度元素上下左右居中

未知宽高元素水平垂直居中 .outer { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .inner { position: absolute; left: 50%; margin-left:
复制链接

扫一扫