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

来源：互联网发布：linux 创建进程编辑：程序博客网时间：2024/05/23 00:00

一个给定高度为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）

阅读全文

0 0