元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)让图片 div居中实现代码CSS里的各种水平垂直居中基础写法心得总结css图片垂直居中 css中如何实现图片垂直居中css自适应宽度 多种方法实现宽度自适应的水平居中div图片垂直居中 如何使div中图片垂直居中css中margin:0 auto居中问题深入探讨div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)表单元素垂直居中完美解决方案三种方式实现元素水平居中显示与固定布局和流式布局概念理解元素及文本的水平居中/垂直居中/绝对居中总结

一.层的横向居中


要让div2在div1中横向居中，解决办法如下：
1.IE中，设置div1的样式：text-align:center; 该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline; 和 display:inline-block; 及类似效果的元素以及文本，如 input img 等 ），子元素中的 div、table 等 具有类似 display:block 效果元素将继承这个样式使文本居中 ,但是容器元素本身并不会居中。
2.IE7 以 上和 firefox 中，设置div2样式：margin: auto; 仅对具有类似 display:block 效果的元素生效，对 display 为 inline、inline-block 的元素不生效，一般用于 div、table 等位置定位的容器元素， margin 样 式 auto 效果是横向居中，并置顶。
3. div2 不能是 position:absolute; 绝对定位将使浏览器无法对元素自动排版，需依赖 left、right 属性，除非明确设定 left:0,right:0;
综合以上：


二.层的垂直居中
1.最常见的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;
css 中的 vertical-align:middle;与表格的 vertical-align 不太一样， 该样式作用于 inline-block(或具有类似行内块状效果) 的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block 元素没有设置 vertical- align 样式）在垂直方向的对齐方式。
vertical-align 无法影响后代元素的内容的对齐方式。
vertical-align 对 block 元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align 作用于 inline元素(如 span)时，将决定该元素自身如何对齐于同一行内的 inline-block 元素，无法影响同辈元素或文本的对齐方式。
vertical-align 取 值为 text-top text-bottom 时， 对齐方式涉及文本的 inline-box 模型，
inline-box 模型的高度 由 line-height(可以是继承来的) 决定，分为 content-area、top、bottom几个部分，其中的 content- area 是由文字大小决定，如果过 line-height 很大， font-size 较小，加上背景颜色，我们就看到的背景色区域就 是 content-area，
text-top 和 text-bottom 并不是可见的文字的顶端和底端（IE6-8 在渲染 text- top 和text-bottom时， 错误地将content-area 的顶端和底端作为对齐的基准）。
具体的解释参考这里：
https://www.jb51.net/css/70053.html
一个例子，firefo、chrome 与IE 有差别：




2.如果不想用table元素实现垂直居中，在IE8以上版本和firefox中，display: table-cell; 可以让div以表格单元格的方式显示，设置样式为
#div2{display: table-cell; vertical-align: middle; } ，但IE6中不支持display: table-cell;
3、如果是单行文本，为了兼容IE6，可以使设置行高与div的高度一致 #div2{heigh:100px;line-height:100px;}
4、对于多行文本，如果包含文本的div高度不固定，为了兼容IE6可以使设置top和bottom的padding为相同的固定值，div随文本内容增加而自动改变高度 #div2{height:auto; padding:10px 0px;}
5、同样，需要剧中的元素如果 position:absolute; 需要明确设置 top、bottom 为0 才能使浏览器对其实现自动排版，因此使用 vertical-align 排版的元素最好不要设置 position:absolute
三.绝对居中
1、利用百分比偏移和margin负值，该方法对所有元素生效，该方法兼容所有浏览器


2、利用绝对定位 0 偏移 和 margin:auto; ，两侧偏移都被设置为0时，margin:auto 将使内容居中，该方法对所有元素生效，该方法不兼容低于 IE8 的浏览器


3、利用 50% 偏移 和负值偏移，支持所有浏览器


不使用 table 和 不计算尺寸而且兼容 IE6 的垂直居中方法我没发现，有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽，块级元素宽度取最大值，高度取最小值。
IE6下，div内的内容(文本和元素)可以撑开 div 的高宽(定义了高宽的值)，IE7以上版本和firefox都不存在这个问题
IE7以上版本支持 min-height max-height ，min-width max-width，因此在IE7 或 firefox 等较新的浏览器是用 min-height min-width 可以达到IE6下自动撑大元素的效果。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！