css垂直水平居中的整理

记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

方法一

html

css

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。

方法二

html

css

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle;*font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

PS：font-size同上等于盒子height乘以差不多0.873的数值，IE7以上版本及其他高级浏览器均支持display的table-cell。

方法三

html

css

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 > .demo3_inner { position:static;}
.demo3 > .demo3_inner > img { position:static;}

PS:相对定位加绝对定位实现IE6/7，display的table-cell实现高级浏览器。

如果要放文字

html

<div class="demo4"><div class="demo4_inner"><p>如果是文本,需要添加一标签来实现，我这里添加的是p。</p></div></div>

css

.demo4 { display:table; position:relative; height:180px; width:180px; border:1px solid #ddd; text-align:center;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

css垂直水平居中的整理相关推荐

关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
高度不定垂直居中_你真的能写好CSS垂直水平居中吗？
如何实现一个元素垂直水平居中确定问题背景题目中只说实现一个元素垂直水平居中,但是问题来了此元素的宽高是已知还是未知? 此元素相对于谁居中? 相对于浏览器窗口相对于其父元素垂直水平居中以上情况 ...
CSS 基础知识之垂直水平居中
最近想转行前端面试时被教育了 ,关于css设置水平垂直居中这个应该是基础的基础了回答不上来确实还是有点尴尬的我第一时间就想到了最简单的针对 div设置 margin 0 auto ; 实操一 ...
CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习. 方法方 ...
html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
css（css3）实现垂直水平居中的那些事
都说"金三银四求职季",本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:"说说垂直水平居中都有哪些实现方式吧?&qu ...
CSS垂直及水平居中小技巧
CSS垂直及水平居中小技巧水平居中 margin法 flex法效果垂直居中 line-height法 flex法效果水平居中 margin法 html代码 <div class=&qu ...
css纵向滚动条自适应,纯css实现完美决对居中自动滚动条根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
纯css实现完美决对居中自动滚动条根据内容宽度.高度自适应,垂直水平居中,自动出现滚动条..doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内 ...

css垂直水平居中的整理

方法一

方法二

方法三

如果要放文字

css垂直水平居中的整理相关推荐

最新文章

热门文章