您的当前位置:首页正文

纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中

2023-07-13 来源:欧得旅游网
纯css多种⽅法实现div中单⾏⽂字、多⾏⽂字及嵌套div

垂直⽔平居中

学习过程中经常遇到要居中的问题,⽔平居中问题⽐较好解决,⽽垂直居中问题因为vertical-align经常失效,所以不容易实现,今天将⾃⼰总结的⼀些⽅法归纳于这边。

1.div中单⾏⽂字垂直⽔平居中。条件:外层div⾼度已经给定。代码如下: 复制代码代码如下:

2.div中多⾏⽂字垂直⽔平居中。条件:⽆。代码如下: 复制代码代码如下:

div中多⾏⽂字垂直⽔平居中div中多⾏⽂字垂直⽔平居中div中多⾏⽂字垂直⽔平居

3.div中嵌套div,使得中间div垂直⽔平居中。条件:⽆。应⽤table模拟法。代码如下: 复制代码代码如下:

4.div中嵌套div,使得中间div垂直⽔平居中。条件:外层div和内层div的⾼度,宽度都已经限定。通过设定margin来使得div居中。代码如下: 复制代码代码如下:

5.div中嵌套div,使得中间div垂直⽔平居中。条件:外层div⾼度,宽度不限定,内部div⾼度,宽度已知,且内外层div的position都必须为absolute。通过设定top,left,margin来使得div居中。代码如下: 复制代码代码如下:

aa

以上就是我⽬前所知道的垂直⽔平都居中的⽅法,还有很多地⽅不⾜,⽐如ie6兼容性⽅⾯等等,希望⼤家能把⾃⼰知道的分

享出来,让我这个新⼿多多学习。

因篇幅问题不能全部显示,请点此查看更多更全内容