CSS水平居中和垂直居中多种解决方案

开发 前端
你对CSS中居中的概念和方法是否熟悉,这里向大家描述一下CSS中水平居中和垂直居中的多种解决方案,主要包括单行垂直居中,层水平居中,div层垂直居中等内容。

这里和大家重点描述一下CSS水平居中和垂直居中的多种解决方案,主要包括单行垂直居中,层水平居中,div层垂直居中等内容,相信通过本文的学习你对CSS居中问题会有更加深刻的认识。

CSS实例:水平居中和垂直居中的多种解决方案

在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。在51cto.com中,大量的文章介绍了这些知识。在和别人合作的时候,你的代码的自适应性就需要做到最大程度的好。你自己在做自己的网页的时候或许可以保证在视觉上是居中的,但是如果让这个元素或者他的父元素变大了,你还能保证居中吗?

  vertical-align是个不错的属性,但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用,但是对行内元素比如span还是有作用的(这时候,这个属性设置为负值元素内容就下移,正值则上移)。

  下面是比较专业的垂直居中的集中解决方案。记录于此,以便查阅。

1、单行垂直居中

  文字在层中垂直居中vertical-align属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

ExampleSourceCode

  1. <divstyledivstyle="line-height:500px;height:500;"> 
  2.  

2、层水平居中

  设置div的宽度小于父div的宽度,设置margin:0auto;,即可让div居中。

ExampleSourceCode 

  1. #parentdiv  
  2. {  
  3. width:500px;  
  4. }  
  5. #childdiv{  
  6. width:200px;  
  7. margin:0auto;  
  8. }  
  9.  

3、层中的文字水平居中

  在childdiv的css加上text-align:center

ExampleSourceCode

  1. #parentdiv  
  2. {  
  3. width:500px;  
  4. }  
  5. #childdiv{  
  6. width:200px;  
  7. margin:0auto;  
  8. text-align:center;  
  9. }  
  10.  

 #p#4、div层垂直居中

ExampleSourceCode

  1. <divstyledivstyle="width:275px;height:375px;border:solidred;"> 
  2. <divstyledivstyle="background:green;height:375px;width:275px;  
  3. position:relative;display:table-cell;vertical-align:middle;"> 
  4. <div 
  5. style="background:red;position:static;position:absolute\9;top:50%;"> 
  6. <div 
  7. style="background:blue;position:relative;top:-50%;"> 
  8. div> 
  9. div> 
  10. div> 
  11. div> 
  12.  

5、div层垂直水平居中,英文超长换行

ExampleSourceCode

  1. <divstyledivstyle="float:left;width:275px;height:375px;border:solidred;"> 
  2. <div 
  3. style="height:375px;width:275px;position:relative;  
  4. display:table-cell;vertical-align:middle;"> 
  5. <div 
  6. style="position:static;position:absolute\9;top:50%;"> 
  7. <divstyledivstyle="position:relative;top:-50%;text-align:center;"> 
  8. <divstyledivstyle="width:85px;WORD-WRAP:break-word;TABLE-LAYOUT:fixed;  
  9. word-break:break-all;margin:0auto;"> 
  10. div> 
  11.  
  12. div> 
  13. div> 
  14. div> 
  15. div> 
  16.  

 6、div垂直滚动

ExampleSourceCode

  1. <div 
  2. style="width:160px;height:260px;  
  3. overflow-y:scroll;border:1pxsolid;"> 
  4. div> 
  5.  

#p#

7、垂直居中和使用text-align水平居中

ExampleSourceCode

  1. <divstyledivstyle="float:left;width:275px;height:375px;border:solidred;"> 
  2. <div 
  3. style="height:375px;width:275px;position:relative;  
  4. display:table-cell;vertical-align:middle;"> 
  5. <div 
  6. style="position:static;position:absolute\9;top:50%;"> 
  7. <div 
  8. style="position:relative;top:-50%;text-align:center;"> 
  9. <divstyledivstyle="width:275px;"> 
  10. <divstyledivstyle="width:160px;WORD-WRAP:break-word;TABLE-LAYOUT:fixed;  
  11. word-break:break-all;text-align:left;"> 
  12. div> 
  13. div> 
  14.  
  15. div> 
  16. div> 
  17. div> 
  18. div> 
  19.  

 8、垂直居中和使用margin水平居中

ExampleSourceCode

  1. <divstyledivstyle="float:left;width:275px;
  2. height:375px;border:solidred;"> 
  3. <div 
  4. style="height:375px;width:275px;position:relative;  
  5. display:table-cell;vertical-align:middle;"> 
  6. <div 
  7. style="position:static;position:absolute\9;top:50%;"> 
  8. <div 
  9. style="position:relative;top:-50%;"> 
  10.  
  11. <divstyledivstyle="margin:0auto;width:160px;WORD-WRAP:break-word;  
  12. TABLE-LAYOUT:fixed;word-break:break-all;"> 
  13. div> 
  14. div> 
  15. div> 
  16. div> 
  17. div> 

【编辑推荐】

  1. 解析DIV+CSS网页布局的意义与副作用
  2. 深入剖析CSS层叠与继承的使用
  3. 专家推荐三大“顶级”CSS技巧!
  4. CSS中hack和注释书写规范
  5. DIV CSS初学者必须掌握的10个问题与技巧

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-24 14:23:39

DIV居中

2021-07-26 08:31:17

算法

2018-09-18 11:20:07

css html5javascript

2010-08-23 14:06:57

DIV+CSS

2010-08-27 10:30:16

CSS垂直居中

2010-09-09 10:23:23

DIVCSS垂直居中

2010-08-30 12:46:42

DIV+CSS

2010-09-10 09:31:08

CSSDIV

2010-09-09 10:15:35

DIVCSS

2010-09-02 13:03:38

CSS垂直居中

2010-08-24 14:47:48

CSS居中

2010-08-31 14:49:57

CSS居中

2019-04-30 10:00:59

CSS居中前端

2010-08-26 08:45:32

margin:0pxa

2010-08-26 09:27:07

CSS居中

2010-08-16 16:39:48

DIV内容居中

2013-10-29 10:32:59

IECSS

2010-08-24 13:25:16

DIV+CSS

2022-06-22 09:06:54

CSS垂直居中代码

2010-09-02 13:16:44

CSS水平居中
点赞
收藏

51CTO技术栈公众号