纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
2014-04-24 15:30
1121 查看
学习过程中经常遇到要居中的问题,水平居中问题比较好解决,而垂直居中问题因为vertical-align经常失效,所以不容易实现,今天将自己总结的一些方法归纳于这边。
1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下:
2.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兼容性方面等等,希望大家能把自己知道的分享出来,让我这个新手多多学习。
1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下:
<style type="text/css"> .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; width:300px; overflow:hidden; } </style> <div class="div3">
2.div中多行文字垂直水平居中。条件:无。代码如下:
<style type="text/css"> .div4{ border:1px solid red; width:400px; padding-bottom:20px; padding-top:20px; text-align:center; } </style> <div class="div4"> div中多行文字垂直水平居中 div中多行文字垂直水平居中 div中多行文字垂直水平居 </div>
3.div中嵌套div,使得中间div垂直水平居中。条件:无。应用table模拟法。代码如下:
<style type="text/css"> .div1{ border:1px solid red; display:table-cell; /* 模拟表格法*/ vertical-align:middle; text-align:center; height:200px; width:200px; } .div2{ border:1px solid red; margin:auto; height:100px; width:100px; } </style> <div class="div1"> <div class="div2"></div> </div>
4.div中嵌套div,使得中间div垂直水平居中。条件:外层div和内层div的高度,宽度都已经限定。通过设定margin来使得div居中。代码如下:
<style type="text/css"> .div5{ border:1px solid red; height:200px; width:200px; } .div6{ border:1px solid red; height:100px; width:100px; margin:50px 50px auto auto; } </style> <div class="div5"> <div class="div6"></div> </div>
5.div中嵌套div,使得中间div垂直水平居中。条件:外层div高度,宽度不限定,内部div高度,宽度已知,且内外层div的position都必须为absolute。通过设定top,left,margin来使得div居中。代码如下:
<style type="text/css"> .div7{ position:absolute; border:1px solid red; height:50%; width:50%; } .div8{ border:1px solid red; height:100px; width:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; } </style> <div class="div7"> <div class="div8">aa</div> </div>
以上就是我目前所知道的垂直水平都居中的方法,还有很多地方不足,比如ie6兼容性方面等等,希望大家能把自己知道的分享出来,让我这个新手多多学习。
相关文章推荐
- 纯css实现div中单行文字,多行文字,嵌套div垂直水平居中问题
- 多行文字在div实现垂直居中的方法
- css实现多行文字与图片垂直水平居中
- 大小不固定的图片、多行文字的水平垂直居中实现方法
- 纯CSS实现多行文字垂直居中几种方法解析
- html中div使用CSS实现水平/垂直居中的多种方式
- CSS - 水平居中和垂直居中的多种实现方法
- Css 中单行及多行文字如何实现水平垂直居中?
- css实现div的水平垂直居中方法
- 如何实现嵌套的内部div垂直水平居中
- 用div+css实现水平垂直居中
- 实现Div层里的文字垂直居中的方法
- css自适应宽度 多种方法实现宽度自适应的水平居中
- CSS教程之div垂直居中的多种方法
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- CSS实现元素水平、垂直居中的方法
- 让Div实现水平或垂直居中的相关方法
- css实现div内图片的垂直、水平居中
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法