在CSS中，元素、文本居中（水平和垂直）

最新推荐文章于 2024-09-02 14:55:19 发布

onizukayao

最新推荐文章于 2024-09-02 14:55:19 发布

阅读量193

点赞数

分类专栏：小技巧文章标签： css3 html5

本文链接：https://blog.csdn.net/gamenoover/article/details/115068124

版权

小技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

大家好，介绍一下CSS中，元素及文本居中（水平和垂直），很常用的写法，基本上可以应用到大部分的场景中。

元素，外层CSS设置：

/* 外层CSS设置 flex弹性布局 居中（水平、垂直） */
        display: flex;
        justify-content: center;
		align-items: center;

文本，直接CSS设置，其中line-height设置为元素高即可：

 /* 文本垂直居中 */
        text-align: center;
        line-height: 20vh;

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局</title>
</head>
<body>
    <div class="warp">
        <div class="card">
        元素和文本 水平及垂直居中
        </div>
    </div>
</body>
<style>
    body{
      margin: 0;
      padding: 0;
    }
    .warp{
        background-color: rgb(222, 230, 230);
        width: 100vw;
        height: 100vh;
        
        /*避免子元素margin 影响外层元素 overflow和position都可以*/ 
        /* overflow: hidden;  */
        position: absolute;
        
        /* flex弹性布局 居中（水平、垂直） */
        display: flex;
        justify-content: center;
		align-items: center;
        
    }
    .card{
        width: 80vw;
        height: 20vh;
        background-color: darkcyan;
        border-radius: 2vh;
        margin: 2vh;
        
        /* 文本垂直居中 */
        text-align: center;
        line-height: 20vh;
    }
</style>
</html>

下面是效果图：
在这里插入图片描述
总结
其实设置文本、元素居中（水平和垂直）方式有很多，我日常中偏爱这样方式，但这种方式也不是万能的，要根据场景多总结，感谢您的阅读，欢迎多提宝贵意见，共同成长~

onizukayao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在CSS中，元素、文本居中（水平和垂直）

在CSS中，元素、文本居中（水平和垂直）大家好，介绍一下CSS中，元素及文本居中（水平和垂直），很常用的写法，基本上可以应用到大部分的场景中。元素，外层CSS设置：/* 外层CSS设置 flex弹性布局居中（水平、垂直） */ display: flex; justify-content: center; align-items: center;文本，直接CSS设置，其中line-height设置为元素高即可： /* 文本垂直居中 */ te
复制链接

扫一扫