css 文字垂直居中

方法一:使用flex布局

复制代码
<style>
    .container {
        display: flex;
        align-items: center;
        height: 100px;
    }
</style>
<div class="container">
    <span>要居中的文本</span>
</div>
复制代码

方法二:使用定位和transform

可以通过将子元素设置为绝对定位,并使用transform属性将其向上移动50%并向左平移50%来实现垂直居中。

复制代码
<style>
    .container {
        position: relative;
        height: 100px;
    }
 
    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="container">
    <span class="text">要居中的文本</span>
</div>
复制代码

方法三:使用表格布局

可以通过将父元素设置为表格布局,并使用vertical-align属性将子元素垂直居中。

复制代码
<style>
    .container {
        display: table;
        height: 100px;
    }
 
    .text {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="container">
    <span class="text">要居中的文本</span>
</div>
复制代码

 

来自baidu ai

posted @   jiduoduo  阅读(203)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
历史上的今天:
2023-02-20 android studio,不管调试还是release,在android12上都报错。
2021-02-20 Swift设置UIImageView为圆形
2021-02-20 vim一个不错的编辑器
2021-02-20 Unknown command: cask
2017-02-20 tomcat调试页面的时候,不刷新
2016-02-20 android.support.v4.widget.DrawerLayout使用
点击右上角即可分享
微信分享提示