如何让div内字体上下左右居中？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让div内字体上下左右居中？相关的知识，希望对你有一定的参考价值。

参考技术A

    div中的文字水平居中：text-align:center；即可。

    div中的文字垂直居中：line-height:值。值等于div的高度。

    示例：<html><body><div style="width:200px;height:100px;border:1px solid red;text-
    align:center;line-height:100px;">居中对齐</div></body></html>。

div在父元素内上下左右居中

(1)宽度和高度已知的

　　

     .box 
            width: 400px;
            height: 200px;
            position: relative;
            background: red;
        
        .content 
            width: 200px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -50px;
            background: green;
        
    </style>

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

(2)宽度和高度未知

　　

     <style>
        .box 
            width: 400px;
            height: 200px;
            position: relative;
            background: red;
        
        .content 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: green;
        
    </style>

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

(3)flex布局

　　

    <style>
        .box 
            width: 400px;
            height: 200px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        
        .content 
            width: 200px;
            height: 100px;
            background: green;
        
    </style>
    <div class="box">
        <div class="content"></div>
    </div>

 

以上是关于如何让div内字体上下左右居中？的主要内容，如果未能解决你的问题，请参考以下文章

CSS 代码如何在一个div内让文字垂直居中

怎么让文字上下居中

如何用CSS让文字居于div的底部

怎么让span在div中垂直居中

如何让div中的文字只显示一行，多余的文字隐藏并加上省略号

如何用CSS让文字居于div的底部