未知宽高的块元素的水平垂直居中

最新推荐文章于 2023-03-21 11:02:24 发布

一只爱笑的猫

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/Yzaxdm/article/details/97517170

版权

未知宽高的块元素的水平垂直居中主要采取两种方法实现:
(1)flex布局，
(2)采用定位与transform结合的方式
代码实现及效果
（1）flex布局
代码：

<html>
<head>
    <style>
        .container {
            width:100%;
            height:100%;
            background:#666;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .fruit{
          border:1px solid black; 
            background-color: pink;
        }
    </style>
</head>

<body>
<div class="container ">                 
   <div class="fruit"> 
   <p>盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p> 
   </div>     
</div>  
</body>
</html>

效果：
在这里插入图片描述
（2）使用绝对定位和transform结合的方法
在CSS中position的值可以取relative，absolute，fixed，static，设置了定位之后，top，left，right，bottom都可以使用了
A、相对定位：position：relative
不设置偏移量的时候对元素没有任何影响，设置了偏移量之后则基于元素自身最开始的位置进行偏移
B、绝对定位：position：absolute
在父级元素没有设置定位position：relative的情况下，此时子元素的绝对定位的偏移量以浏览器的左上角为基准；
在父级元素设置定位position：relative的情况下，此时子元素的绝对定位的偏移量以父元素的位置为基准；

父元素采用相对定位，子元素采用绝对定位

<html>
<head>
    <style>
        .container {
            width:100%;
            height:100%;
            background:#666;
            position:relative;
        }
        .fruit{
          position:absolute;
          border:1px solid black; 
            background-color: pink;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);   
//transform属性允许对元素进行旋转，缩放，移动等操作
           // translate(x,y)表示基于原来的位置，沿X轴平移x，沿Y轴平移y
                 }
    </style>
</head>

<body>
<div class="container ">                 
   <div class="fruit"> 
   <p>盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p> 
   </div>     
</div>  
</body>
</html>

其中，采用top，left以及transform进行偏移的区别：
（1）top和left是距离父容器的偏移
（2）transform是按照自身的宽高进行偏移
效果图：
在这里插入图片描述
（3）用table-cell属性
代码：

    .container {
     display:table;
     width:100%;
     height:100%;
     background:#666;
 }
 .fruit{
    background:pink; 
  display:table-cell;
  vertical-align:middle;
  text-align:center;
border:1px solid black;  
} 
效果图：

在这里插入图片描述

一只爱笑的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
未知宽高的块元素的水平垂直居中

未知宽高的块元素的水平垂直居中主要采取两种方法实现:(1)flex布局，(2)采用定位与transform结合的方式代码实现及效果（1）flex布局代码：<html><head> <style> .container { width:100%; height:100%; ...
复制链接

扫一扫