[璃猫]

璃猫博客

limao.pro

垂直居中 - 文本、块元素 垂直居中

Aurora

December 2, 2020

访问: 87 次

0 Comments

109字数

#

CSS 样式表

首页 / CSS 样式表正文

垂直居中

文本 垂直居中

1.vertical-align:middle;

<style>
.va{vertical-align: middle;}
div{font-size: 12px;//更改了大小
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 36px;//更改了大小
border: 1px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
    inline垂直居中
</div>

2.单元格垂直居中方法:table-cell:middle;

table-cell:middle;

3.高度和行高:line-height + height;

<style>
* { margin: 0;padding: 0;}
div{width: 300px;
height: 100px;//父类元素高度
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.lh{font-size:24px;
line-height:100px; //目标垂直字体的行高
}
</style>

<div>         
 <span class="lh">inline垂直居中</span>
</div>

4.行内块级元素垂直居中+vertical-align:top

<style>
* { margin: 0;padding: 0;}
 div{width: 300px;height: 100px;margin: 20px auto;border: 1px dashed #000;text-align: center;}
.middle{display: inline-block;position:relative;
font-size:24px;line-height:24px;
top:50%;margin-top:-12px;
vertical-align:top; }
</style>

<div>         
<span class="middle">inline垂直居中</span>
</div>



块元素 垂直居中

1.display: table-cell;vertical-align: middle;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .out{
                width: 500px;
                height: 500px;
                background-color: skyblue;
                display: table-cell;
                vertical-align: middle;
            }
            .in{
                width: 100px;
                height: 100px;
                background-color: salmon;
            }
            
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
</html>

2.display: flex;align-items: center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .out{
                width: 500px;
                height: 500px;
                background-color: skyblue;
                display: flex;
                align-items: center;/*垂直居中*/
                /*justify-content: center;*//*水平居中*/
                
            }
            .in{
                width: 100px;
                height: 100px;
                background-color: salmon;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
</html> 

3.position: absolute;top: 50%;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .out{
                width: 500px;
                height: 500px;
                background-color: skyblue;    
                position: relative;            
            }
            .in{
                width: 100px;
                height: 100px;
                background-color: salmon;
                position: absolute;
                top: 50%;
                margin-top: -50px;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
</html>

4.父容器中设置display:flex;子元素设置align-self: center;

5.相对定位 垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .out{
                width: 500px;
                height: 500px;
                background-color: skyblue;
                position: relative;
            }
            .in{
                width: 100px;
                height: 100px;
                background-color: salmon;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
</html>

本文为原创知识文章,版权归 璃猫博客 所有,转载请注明出处!

本文链接: https://www.limao.pro/archives/016.html

友情提示:如果博客部分链接出现404,请留言或者 联系博主 修复。

最后修改时间:December 2, 2020

© 本文允许规范转载

嗨!猫客,不妨给 5秒 时间,赞赏一下本博客吧!( 其实本博主在按钮里藏了支付宝红包哦~ )

上一篇
下一篇

发布你的观点趴i

评论 ( 请使用真实邮箱地址,以便接收评论回复信息 )

选择表情

还没有小可爱发布评论呢~ o(╥﹏╥)o

下面没有内容啦!(°Д°) 太长啦~我快被撑爆啦!o(╥﹏╥)o

热门文章
TYPECHO恋爱主题 - 往后余生 November 29, 2020
CSS样式表 November 26, 2020
JAVA环境安装与编程软件Eplices安装教程 November 23, 2020

站内活动 时间一般均为 7天 时间

欢迎各位猫客,本站运营初期,不足之处欢迎大家指点。(灬°ω°灬)

博客资料
  • 文章数目

    70

  • 评论数目

    9

  • 站内页面

    3

  • 运行天数

    0年202天

广而告之
我在等你呢~
[享受生活 做最酷的自己]
[头像]

Aurora

环游是无趣,至少可以陪着你~

×
SUPPORT