元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）

最新推荐文章于 2024-07-25 08:14:42 发布

谷小伟

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1w

点赞数 4

分类专栏： css基础样式文章标签： css

本文链接：https://blog.csdn.net/qq_38347669/article/details/81355104

版权

css基础样式专栏收录该内容

3 篇文章 1 订阅

订阅专栏

今天来介绍各种元素垂直居中，很实用哦！

依然是先上图片哦，看好了，是不是有你需要的呢？

这里写图片描述

行内元素垂直居中

利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高，只能靠元素内容撑开，但是父元素要有宽高的哈，这种相对比较简单；
html

   <h2>1、子元素是行内元素</h2>
    <div class="big">
        <span class="small">我是行内元素span</span>
    </div>

.big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

块级元素垂直居中

块级元素的话相对来说就更简单了，有很多种情况，利用margin，padding，position定位，会有很多种方法的，既然是块级元素了肯定宽高是要设置的，否则垂直居中的父子关系也就没什么意义了，随便写了一个相对简单的
html

<h2>/2、子元素是块级元素</h2>
    <div class="box">
        <div class="box_con">我是块级元素div</div>
    </div>

.box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性，小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }

图片垂直居中

这应该是碰到最多，最不好控制的了，因为大多数我们不想去限制img的宽高，又想让img垂直居中，呼呼，代码见吧
html

 <h2>3、子元素是图片</h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    </div>

   .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

-哈哈，其实跟行内元素是一样一样的哦，只是图片的大小不要超过他爸爸哦，否则。。。。

最后，多行文本垂直居中

这个用的应该不是太多吧，但是这是display：table；和display:table-cell;的神奇功效，不能放过呢
html

 <h2>4、多行文本垂直居中</h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳，黯淡了，无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去，从满心不甘至无可奈何，最终落得个与世诀别。即使再不愿，也抵不过光阴的蹉跎，岁月的无情。似一支锋利的针，刺的多了，也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红，一滴，一滴，禁锢了世界。
            “最是人间留不住，朱颜辞镜，花辞树。”从落地开始，便踏入一个无法回头的路程，通往世界的那头。无法静止，无法再来，上天仅予了世人一次机会，一次，不可多得、万般珍贵的机会。
            当然，现在的你，或许是豆蔻年华的少年，性格作风间，满是少年的意气风发，锋芒毕露，好比“少年不识愁滋味，爱上层楼，爱上层楼”“左牵黄，右擎苍”；或是初来乍到的中年人，不必前者，中年人，更加成熟稳重了，当然，也添了更多的责任，有自己的信念，需要去守护。但，时光流逝的匆匆，就有了“无可奈何花落去，似曾相识燕归来”的诗句；又或是已生皱纹，苍苍白发的老人，届时，离路程的尽头，离结束不远了。更多的，也是释然。“高堂明镜悲白发，朝如青丝暮成雪。”操劳了一生，也要停止了。
        </p>
    </div>

.par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }

子元素往往会100%宽高继承父级元素，所以如果想设置资源的占比小点的话，是需要给父级元素设置padding属性值的，当然，也要加上box-sizing：border-box;否则子元素会溢出哦。

最后的最后，整篇代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

        .box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性，小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }
        .par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            width: 500px;
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="wrapper">
<!--子元素是行内元素-->
   <h2>1、子元素是行内元素</h2>
    <div class="big">
        <span class="small">我是行内元素span</span>
    </div>


<!--子元素是块级元素-->
    <h2>/2、子元素是块级元素</h2>
    <div class="box">
        <div class="box_con">我是块级元素div</div>
    </div>

 <!--子元素是图片-->
    <h2>3、子元素是图片</h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    </div>

    <h2>4、多行文本垂直居中</h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳，黯淡了，无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去，从满心不甘至无可奈何，最终落得个与世诀别。即使再不愿，也抵不过光阴的蹉跎，岁月的无情。似一支锋利的针，刺的多了，也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红，一滴，一滴，禁锢了世界。
            “最是人间留不住，朱颜辞镜，花辞树。”从落地开始，便踏入一个无法回头的路程，通往世界的那头。无法静止，无法再来，上天仅予了世人一次机会，一次，不可多得、万般珍贵的机会。
            当然，现在的你，或许是豆蔻年华的少年，性格作风间，满是少年的意气风发，锋芒毕露，好比“少年不识愁滋味，爱上层楼，爱上层楼”“左牵黄，右擎苍”；或是初来乍到的中年人，不必前者，中年人，更加成熟稳重了，当然，也添了更多的责任，有自己的信念，需要去守护。但，时光流逝的匆匆，就有了“无可奈何花落去，似曾相识燕归来”的诗句；又或是已生皱纹，苍苍白发的老人，届时，离路程的尽头，离结束不远了。更多的，也是释然。“高堂明镜悲白发，朝如青丝暮成雪。”操劳了一生，也要停止了。
        </p>
    </div>

</div>
</body>
</html>

谷小伟

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）

今天来介绍各种元素垂直居中，很实用哦！依然是先上图片哦，看好了，是不是有你需要的呢？行内元素垂直居中利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高，只能靠元素内容撑开，但是父元素要有宽高的哈，这种相对比较简单；html &lt;h2&gt;1、子元素是行内元素&lt;/...
复制链接

扫一扫