实现子元素的水平垂直居中

初梦依旧

于 2024-07-02 18:00:19 发布

阅读量435

点赞数 4

文章标签： css3

本文链接：https://blog.csdn.net/qq_44149644/article/details/140131725

版权

首先我是参考大佬
https://juejin.cn/post/6844903679242305544?searchId=20230909222658C6F9D6A4FAD1A9C911AC
写的这篇文章.
一、第一部分:
1父级存在宽高,子级存在宽高
①第一种方法:
“子绝父相”,使用"margin:auto;top:0;right:0;bottom:0;left:0"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    .wp{
        border: 1px solid red;
        width: 200px;
        height: 200px;
    }
    .box{
          background-color: green;
          border:1px solid black;  
    }
     .size{
      width: 50px;
          height: 50px;
    }
    .wp{
        position: relative;
    }
    .box{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
</style>
<body>
   <!-- //父子居中的方法 -->
   <div class="wp">
     <div class="box  size"></div>
   </div>
</body>
</html>

这段代码直接放到html文件中就可以.
这是其中的一种思路,这个思路是
“top:0;right:0;bottom:0;left:0;margin:auto”
对应的是意思为"子元素相对于最近的非static定位祖先居中",对于box来说它的最近的"position:非static"祖先是"wp"祖先,也就是它的父级…

在这里插入图片描述

如果子元素不添加"width"和"height",那么子元素就会填满整个 ‘最近的position属性不为static的祖先元素’.
在这里插入图片描述

②使用的是子绝父相 top:50%;left:50%;margin-left:-“子元素宽度一半” ;margin-rtop:-“子元素高度一半”
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    .wp{
        border: 1px solid red;
        width: 200px;
        height: 200px;
    }
    .box{
          background-color: green;
          border:1px solid black;  
    }
     .size{
      width: 50px;
      height: 20px;
    }
    .wp{
        position: absolute;
    }
    .box{
     position: relative;
     top: 50%;
     left: 50%;
    margin-left: -25px;
    margin-right: -10px;
     }
</style>
<body>
   <!-- //父子居中的方法 -->
   <div class="wp">
     <div class="box  size"></div>
   </div>
</body>
</html>

解释一下:
top:50%;和left:50%;是相对于父元素的宽度和高度和宽度的50%;
但是子元素中的position:absolute;是元素的"左上角"对于父元素的位置,
如果写top:50%;left:50%那么子元素的"左上角"就在父元素的"中心点上",那么实际上子元素并没有实现水平垂直居中.是存在偏移的
那么我们就使用margin-left:-25px;让元素的偏移
在这里插入图片描述
就是需要子元素的中心点跑到他的左上角的点的位置上,就能满足要求了.目标就是这个,实现目标有两种方式
第一种
margin-left:-50px; margin-top:-50px
第二种
top: calc(50% - 50px);
left: calc(50% - 50px);