css的div，文本垂直居中的方法，百分比div垂直居中

最新推荐文章于 2024-07-31 16:33:26 发布

qq_23476319

最新推荐文章于 2024-07-31 16:33:26 发布

阅读量420

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_23476319/article/details/54835734

本文介绍了网页设计中常见的文本及div等元素居中方法，包括使用CSS属性如line-height、display flex、table-cell等实现固定及非固定尺寸元素的垂直与水平居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。

实现文本居中

最简单的方法：

.out{

/*使用 height 与 line-height 高度一样ss 实现居中*/

        height: 700px;
        line-height: 700px;
        text-align: center;

}

第二种文本居中：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>居中方法</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    .out {
        width: 700px;
        height: 700px;
        margin: auto;
        border: 1px solid;
        /*使用 display的 flex 实现居中*/
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .li {
        width: 200px;
        height: 100px;
        background-color: yellow;
        border: 1px solid;
        /*使用 display的 flex 实现文本 居中*/
        /* display:flex;
        justify-content:center;
        align-items:center*/
        
        /*vertical-align对一些特定显示样式
        （例如单元格显示方式：table-cell）的元素才会起作用。
        所以要实现上下垂直居中对齐，可以采用如下样式*/
        display: table-cell;
        /*按照单元格的样式显示元素*/
        vertical-align: middle;
        /*垂直居中对齐*/
        text-align: center;
        /*水平居中对齐*/
    }
    </style>
</head>

<body>
    <div class="out">
        <!-- 外部居中-测试 -->
        <div class="li">
            <p class="li">文本居中</p>
        </div>
    </div>
</body>

</html>

实现div等居中

第一种方法：

固定高宽div垂直居中

enter image description here

如上图，固定高宽的很简单，写法如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>居中方法</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    .out {
        width: 700px;
        height: 700px;
        margin: auto;
        border: 1px solid;
        position: relative;
    }
    
     .li {
    	width: 200px;
    	height: 100px;
        background-color: yellow;
        border: 1px solid;
        text-align: center;
        /*加上下面3句话，可以居中*/
       /* margin: auto;  
         position: absolute;
        top: 0;left: 0;right: 0; bottom: 0;
        */
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left:-100px;
            margin-top:-50px;
     }


    </style>
</head>

<body>
    <div class="out">
     
        外部居中-测试
        <div class="li">
            <p class="pcss">文本居中</p>
        </div>
    </div>
</body>

</html>

第二种方法；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>居中方法</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    .out {
        width: 700px;
        height: 700px;
        margin: auto;
        border: 1px solid;
        /*使用 display的 flex 实现居中*/
        display:flex;
        justify-content:center;
        align-items:center;
         
    }
    
     .li {
    	width: 200px;
    	height: 100px;
        background-color: yellow;
        border: 1px solid;
        
     }


    </style>
</head>

<body>
    <div class="out">
     
        <!-- 外部居中-测试 -->
        <div class="li">
            <p class="li">文本居中</p>
        </div>
    </div>
</body>

</html>