单行/多行文字垂直居中

最新推荐文章于 2024-06-09 18:57:36 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2024-06-09 18:57:36 发布

阅读量4.2k

点赞数 1

分类专栏： css 文章标签： css 单行/多行垂直居中

本文链接：https://blog.csdn.net/weixin_42645716/article/details/87716547

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

转自：https://www.cnblogs.com/moqiutao/p/4807792.html

一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

<p style="border:1px solid red;width:600px;height:100px;line-height: 100px;">几个文字或者一行文字的居中对齐 方法：行高与容器高度相同</p>

在这里插入图片描述
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

<p style="border:1px solid red;width:300px;height:auto;padding:20px 0px;">一行文字或者几行文字的居中对齐 方法：padding</p>

在这里插入图片描述
三、模拟表格法
将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

<div style="display:table;border:1px solid red;width:100px;height:100px;text-align:center;">
    <p style="display:table-cell;vertical-align:middle;">模拟表格法</p>
</div>

在这里插入图片描述
四、CSS3的transform来实现

<div style="border:1px solid red;width:100px;height:100px;">
    <p style="position: relative;top:50%;transform:translateY(-50%);margin:0; ">transform 法  垂直居中</p>
</div>

在这里插入图片描述

<div style="border:1px solid red;width:200px;height:100px;">
    <p style="position: relative;left:50%;transform:translateX(-50%);margin:0; ">transform法 水平居中，(无效)</p>
</div>

在这里插入图片描述
五、css3的box方法实现水平垂直居中

<div class="center">
    <div class="text">
        <p>box法</p>
        <p>我是多行文字</p>
        <p>我是多行文字</p>
        <p>我是多行文字</p>
    </div>
</div>

.center {
    width: 300px;height: 200px;border: 1px solid red;
    display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;
    display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;
    display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;
    display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;
    display: box;box-orient: horizontal;box-pack: center;box-align: center;
}

在这里插入图片描述
六、flex布局

<div class="flex">
    <div>
        <p>flex 布局</p>
        <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
        <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
    </div>
</div>

.flex{
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;width:200px;height:200px;border: 1px solid red;
}

补充：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<style>
    /* 备注：
    PC端有兼容性要求，宽高固定，推荐absolute + 负margin
    PC端有兼容要求，宽高不固定，推荐css-table
    PC端无兼容性要求，推荐flex
    移动端推荐使用flex */

    *{margin: 0;padding: 0}
    .box{border: 1px solid red;width: 300px;height: 300px;}
    .content{background: yellowgreen;}

    /* 方法一 */
    /* .box{position: relative;}
    .content{width: 100px;height: 100px;}
    .content{position: absolute;top: 50%;left: 50%;margin-top:-50px;margin-left:-50px;  } */
    
    /* 方法二 */
    /* .content{width: 100px;height: 100px;}
    .box{position: relative;}
    .content{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;} */

    /* 方法三： */
    /* .content{width: 100px;height: 100px;}
    .box{position: relative;}
    .content{position: absolute;top:calc(50% - 50px);left:calc(50% - 50px);} */

    /* 方法四： */
    /* .box{position: relative;}
    .content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} */

    /* 方法五： */
    /* .box{line-height: 300px;text-align: center;font-size: 0px;}
    .content{font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;text-align: left;} */

    /* 方法六： */
    /* .six{border: 1px solid red;width: 300px;height: 300px;}
    .six_box{background: yellowgreen;}
    .six{writing-mode: vertical-lr;text-align: center;}
    .six_box{writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;}
    .six_con{display: inline-block;margin: auto;text-align: left;} */

    /* 方法七  table*/
    /* .box{text-align: center}
    .content{display: inline-block;} */

    /* 方法八 */
    /* .box{display: table-cell;text-align: center;vertical-align: middle;}
    .content{display: inline-block;} */

    /* 方法九 */
    /* .box{display: flex;justify-content: center;align-items: center;} */

    /* 方法十 */
    .box{display: grid;}
    .content{align-self: center;justify-self: center;}

    .red{color: red;}
    .blue{color:blue;}
</style>
<body>
    <div class="box">
        <div class="content size">55555</div>
    </div>

    <br/>

    <div class="six">
        <div class="six_box">
            <div class="six_con"></div>
        </div>
    </div>

    <br/>

    <table>
        <tbody>
            <tr>
                <td class="box"><div class="content">1111</div></td>
            </tr>
        </tbody>
    </table>



    <div style="writing-mode: vertical-lr;">文字垂直</div>

    <div class="red blue">123</div>
    <div class="bule red">123</div>
</body>
</html>

混迹在开发队伍里的伪开发

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
单行/多行文字垂直居中

转自：https://www.cnblogs.com/moqiutao/p/4807792.html一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：&lt;p style="border:1px solid red;width:600px;height:100px;line-height: 100px;"...
复制链接

扫一扫

专栏目录