垂直⽔平居中
学习过程中经常遇到要居中的问题,⽔平居中问题⽐较好解决,⽽垂直居中问题因为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居中。代码如下: 复制代码代码如下:
以上就是我⽬前所知道的垂直⽔平都居中的⽅法,还有很多地⽅不⾜,⽐如ie6兼容性⽅⾯等等,希望⼤家能把⾃⼰知道的分
享出来,让我这个新⼿多多学习。
因篇幅问题不能全部显示,请点此查看更多更全内容