div+css布局：文字垂直居中

最新推荐文章于 2024-01-29 10:00:00 发布

lucky111one

最新推荐文章于 2024-01-29 10:00:00 发布

阅读量432

点赞数

分类专栏： div+css布局文章标签： div+css布局

本文链接：https://blog.csdn.net/luckyone1111/article/details/78355185

版权

div+css布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一个给定高度为100像素的容器的div节点，如何使得里面的文字垂直居中？

<!DOCTYPE html>
<html>
<head>
<title>文字垂直居中</title>
    <style type="text/css">
        /*方法一：当只有一行或几个文字，让文字的行高和容器的高度相同即可；*/
        /* .parent{background-color:yellow;height:100px;text-align: center;line-height:100px;}  */
        /*方法二 absolute+transform*/
        /*.parent{position:relative;height:100px;background-color:yellow;}
        .child{position:absolute;top:50%;transform:translateY(-50%);}*/
        /* 方法三 table-cell+vertical-align*/      
        .parent{display:table;background-color:yellow;height:100px;}
        .child{display:table-cell; vertical-align:middle;}        
    </style>	
</head>
<body>
    <div class="parent"><div class="child">111111111111111111111111111</div></div>
</body>
</html>

方法二和方法三同样适用于子元素于父元素垂直居中且（子元素与父元素）高度均可变。

方法二（absolute+transform）:优点：绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素，则父元素也会失去高度。

缺点：transform为css3属性，有兼容问题

方法三：兼容性好（支持IE8，以下版本需要调整页面结构至table）

lucky111one

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
div+css布局：文字垂直居中

一个给定高度为100像素的容器的div节点，如何使得里面的文字垂直居中？方法一：当只有一行或几个文字，让文字的行高和容器的高度相同即可；文字垂直居中 .parent{background-color:yellow;height:100px;text-align: center;line-height:100px;} 111111111
复制链接

扫一扫

专栏目录