彻底理解水平垂直居中

最新推荐文章于 2024-07-18 17:34:14 发布

ths99

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量361

点赞数

分类专栏： CSS 文章标签： css 水平垂直居中

本文链接：https://blog.csdn.net/qq_34123985/article/details/91050134

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

水平垂直居中

页面中一个 div 水平垂直居中

方法一

这个难度理解上不是很难。已知 div 宽高时：设置绝对定位，top,left 均取 50% ，然后向上移动自身高度的 50%，再向左移动自身宽度的50% 即可。

div{
        width: 200px;
        height:100px;
        border:1px solid #6f6;
        
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
      }

方法二

根据上面的思路，可以用 css 的transform 实现，原理跟上面是一样的，不过同样适用于不知道宽高的情况下

 div{
        /* width: 200px;
        height:100px; */

        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }

方法三

这个方法也能用于不知道宽高的情况下

div{
        /* width: 200px;
        height:100px; */
        /* border:1px solid #6f6; */

        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
      }

p标签在父级 div 中水平垂直居中

 <body>
      <div>
        <p>你的能量</p>
      </div>
  </body>

    <style type="text/css"> 
      p{
        position:absolute;
        text-align:center;
        line-height:100px;        

        top:0;
        bottom:0;
        right:0;
        left:0;
        margin:auto;
      }
      div{
        top:100px;
        left:100px;
        position:relative;
        width:200px;
        height:100px;
        
        border:1px solid red;
      }
    </style>

在这里插入图片描述
这里需要理解其原理，p标签在没设置宽和高时，默认继承自父元素，也就是这里的 div . 假设注释掉下面语句：

    <style type="text/css"> 
      p{
        position:absolute;
        /* text-align:center; */
        /* line-height:100px;         */

        top:0;
        bottom:0;
        right:0;
        left:0;
        margin:auto;
      }
      div{
        top:100px;
        left:100px;
        position:relative;
        width:200px;
        height:100px;
        
        border:1px solid red;
      }
    </style>

可以想象p 标签设置了一个边框，为了表现出来，换成绿色，但是不设置宽高，可以看出，p标签的 border 是和父级的 border重合了，原因是因为p标签的宽高继承了 div的宽高。p标签的盒子此时已经做到了水平垂直居中于父元素 div
在这里插入图片描述
为了明显一点，我们可以手动设置一下 p标签的宽高，效果如图

      p{
      //手动设置宽高
        width: 80px;
        height:40px;
        position:absolute;
        /* text-align:center;
        line-height:100px; */
        border:2px solid green;
        top:0;
        bottom:0;
        right:0;
        left:0;
        margin:auto;
      }

在这里插入图片描述
可以清楚的看到，p 标签的盒子已经是水平垂直居中于父元素 div 中了，那么现在要做的就是将 p 元素的盒子模型的 content 区放在盒子正中央。
添加下面两条样式：设置水平居中 text-align:center 即可，垂直居中，只需要设置行高等于盒子的高度即可。

		text-align:center;
        line-height:40px;

在这里插入图片描述
最后把 p标签的border 去掉即达到效果。

图片在页面水平垂直居中

不要被迷惑了，img 是行级块元素，inline-block div可以设置的样式，img 也行，因此，上面div居中的三种方法任意一种都行

图片在父级水平垂直居中

仍然不要被迷惑了，只是在一开始时，div的父级是 body ，现在 img 的父级是 div ,上面的三种方法一样可以用,比如：

方法一，二，三

div {
        position: relative;
        width: 300px;
        height:300px; 
        border:1px solid #6f6;
      }
      img {
        width: 200px;
        height: 200px;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
      }

方法四

      div {
        width: 300px;
        height:300px; 
        border:1px solid #6f6;
        
        display:table-cell;
        text-align:center;
        vertical-align:middle;
      }
      img {
        width: 200px;
        height: 200px;
      }

table-cell:此元素会作为一个表格单元格显示，类似 td 和 th

方法四不适用于其它块级子元素在父元素中水平垂直居中，因为此时 text-align : center 是对块级元素起不了作用的如

<style type="text/css">
      .wrap{
        width: 300px;
        height:300px; 
        border:1px solid #6f6;

        display:table-cell;
        text-align:center;
        vertical-align:middle;
      }
      .content{
        width: 200px;
        height: 200px;
        border:1px solid red;
      }
    </style>

	<div class="wrap">
      <div class="content"></div>
    </div>

在这里插入图片描述
是达不到水平垂直居中的。
换成 span 可以达到效果

.wrap{
        width: 300px;
        height:300px; 
        border:1px solid #6f6;

        display:table-cell;
        text-align:center;
        vertical-align:middle;
      }
      .content{
        border:1px solid red;
      }
    </style>

<div class="wrap">
      <span class="content">你的能量</span>
    </div>

在这里插入图片描述
初步判断：只有子元素本身是行级元素时或具有行级属性时，也就是 inline时，上面的方法才适用
子元素改回 div 标签，并设置 display 属性为 inline-block 或者 inline 都行。

<div class="wrap">
      <div class="content">超乎你的想象</di'v>
    </div>

 .wrap{
        width: 300px;
        height:300px; 
        border:1px solid #6f6;

        display:table-cell;
        text-align:center;
        vertical-align:middle;
      }
      .content{
        display:inline-block;
        border:1px solid red;
      }

效果还是可以达到水平垂直居中。

在这里插入图片描述
上面的问题都可以归结为一个问题，就是子元素在父元素中水平垂直居中问题，解决这个问题的办法，上面的3个办法任何一种都行。另外就是注意子元素内含有文本时，注意盒子模型中 content 内容区居中的处理方法。

另外就是方法四的猜想：当子元素是行级元素时的新处理方法，在容器内display 属性设置为 table-cell ，显然，前面三种方法也适用，只需设置dispaly 属性为 inline-block就和一般的块级元素居中处理一样了

ths99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彻底理解水平垂直居中

水平垂直居中页面中一个 div 水平垂直居中p标签在父级 div 中水平垂直居中 <body> <div> <p>你的能量</p> </div> </body> <style type="text/css"> p{ posi...
复制链接

扫一扫