css实现垂直居中6种方法

最新推荐文章于 2022-12-18 18:34:28 发布

程序员的生活1

最新推荐文章于 2022-12-18 18:34:28 发布

阅读量204

点赞数

分类专栏： html+css 文章标签： css 前端 html+css

本文链接：https://blog.csdn.net/lin123_00/article/details/103282055

版权

在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下css垂直居中问题。

1、如果是单行文本。

看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            width: 500px;
            height: 500px;
            background: gray;
        }
 
        #wrapper p{
            line-height: 500px;//行高=父级的height，垂直居中。
            text-align: center;//水平居中
        }
    </style>
</head>
<body>
 
<div id="wrapper">
    <p>这是一段要垂直水平居中的文字！</p>
</div>
 
</body>
</html>

效果如图：

说明：适用于单行文本，多行就不可以了！

2、对于已知高度的块级元素，可以采用绝对定位。看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            position: relative;//父级
            width: 500px;
            height: 500px;
            background: gray;
        }
 
        #wrapper p{
            position: absolute;//子级用绝对定位
            top:50%;//先定位到50%的位置
            height: 300px;//已知的高度
            margin-top: -150px;//往上提本身高度的一半
        }
    </style>
</head>
<body>
 
<div id="wrapper">
    <p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字

最低0.47元/天解锁文章

程序员的生活1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现垂直居中6种方法

在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下css垂直居中问题。1、如果是单行文本。看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title...
复制链接

扫一扫