div居中问题

http://bbs.blueidea.com/thread-2774049-1-1.html

http://blog.csdn.net/lee576/archive/2008/11/27/3389873.aspx

首先详细解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。

现在我们来分析一下程序该如何实现：
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。

1.计算出层距离显示区域左边和上边的位置

注意：divId指的是所要居中的层,divId.clientWidth为其宽度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;

2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
说明：divId为DIV标签的id值
这样这个层就是居中显示的了。

第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。

其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
这样显示出来就是居中的了。

<script language="javascript" type="text/javascript">
function divcenter()
{
var divId=document.getElementById('mxh');
divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft;
divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop;
}
</script>
-----
<div id=mxh style="position:absolute;left:200px;top:30px;width:200px;
height:200px;background -color:navy;border:2px">我是居中显示的了.
</div>

------------------------------------------------------
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，
很有代表性。

题目的难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://www.jb51.net/images/logo.gif" />
</div>
-----------------------------
网上有这样一道题目：

一个字符串String=“abbcccddddabcd”，找出里面出现次数最多的字母和出现的次数。

经典的解答思路为：取出字符串的第一个字符（首字母），
利用的字符串的 replace 方法将符合正则表达式（第一个字符）替代为空，
此字母出现的次数为原始的字符串长度减去替代后的字符串长度。
循环迭代找出长度最长的字母

法一：只有一个最大长度字符时
<script language="javascript" type="text/javascript">
function getMaxLength()
{
var str="abbcccdddddfffffabcdf";
var maxLength = 0; //命名一个变量放置字母出现的最高次数并初始化为0
var result = ''; //命名一个变量放置结果输入
while( str != '' ) //循环迭代开始，并判断字符串是否为空
{
oldStr = str; //将原始的字符串变量赋值给新变量
getStr = str.substr(0,1); //用字符串的substr的方法得到第一个字符（首字母）
str = str.replace(new RegExp(getStr,"g"),""); // 将字符串中为值为getStr的字符全部替换为空字符
if( oldStr.length-str.length > maxLength )
{ //判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度
maxLength = oldStr.length-str.length; //两字符串长度相减得到最大的字符串长度
result = getStr + "=" + maxLength //返回最大的字符串结果（字母、出现次数）
}
}
alert(result) //弹出结果
}
</script>

法二：存在多个相同最大长度字符时(例如:String=“abbccccddddabcd”,c和d存在相同的最大长度)
<script language="javascript">
var str="aaddcc";
var arr = [];
var arrMax = [];
var i = 0;
var char = str.charAt(i);
while (char)
{
arr[char] = (arr[char]==undefined) ? 1 : (arr[char] + 1);
if ( !arr[arr[char]] )
arr[arr[char]] = [];
arr[arr[char]].push(char);
arrMax.push(arr[char]);
i++;
char = str.charAt(i);
}
alert(arr[arrMax.sort().reverse()[0]] + " | " + arrMax.sort().reverse()[0]);
</script>
---------------------------------------------------------

说说关于网页内容（文字、图片、容器等）垂直居中的问题。挑起这个话题还是因为去年淘宝 UED 招聘时的一道笔试题，那篇博 去年就看过了，但最近被挖出来再看又是另一种感受——能感觉到自己还是小有提高的:) 顺手把垂直居中的方法总结下：

1. 单行文字在固定高度容器中垂直居中

这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；

#box { height: 120px; line-height: 120px; overflow: hidden }

2. 多行文字在未知高度容器中垂直居中

这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；

#box2 { padding: 10px 0 }

3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）

#box3_wrapper {
display: table;
height: 311px;
background: #eee
}
#box3 {
display: table-cell;
vertical-align: middle
}

<div id="box3_wrapper">
<div id="box3">
作者：shimano<br />
如何既给用户提供最大限度的编辑权限<br />
又能保证网页整体的规范和美观？<br />
真 TMD 难啊！
<div>
</div>

注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。

如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）；这可以理解为默认 line-height，在 这篇日志 中我也是遇到了同样的问题。

关于 IE6 下 line-height 的问题我在 这篇日志 中有提。

4. 多行文字在固定高度容器中垂直居中（IE 浏览器）

因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法：

#box3_wrapper {
position: relative;
}
#box3_inner {
position: absolute;
top: 50%
}
#box3 {
position: relative;
top: -50%;
background: #eee
}

<div id="box3_wrapper">
<div id="box3_inner">
<div id="box3">
这种方法<br />
在下面的未知高度 div 垂直居中<br />
也用到了
</div>
</div>
</div>

下面有个权衡 IE 与 非 IE 浏览器浏览效果的实现方法，请继续看

5. 未知高度 div 的垂直居中

#box4_wrapper {
height: 100%;
width: 100%;
overflow: hidden;
position: relative
}
#box4_wrapper[id] {
display: table;
position: static
}
#box4_outer {
position: absolute;
top: 50%
}
#box4_outer[id] {
display: table-cell;
vertical-align: middle;
position: static
}
#box4_inner {
position: relative;
top: -50%;
margin: 0 auto;
background: #eee
}

<div id="box4_wrapper">
<div id="box4_outer">
<div id="box4_inner">
这是一种无 hack 的方式<br />
虽然环保，但是臃肿:(
</div>
</div>
</div>

CSS2 选择符 #value[id] 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:)

6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中

#box5 {
display: table-cell;
*display: block;
*font-size: 175px;
*font-family: Arial;
vertical-align: middle;
height: 200px;
width: 200px
}
#box5 img {
vertical-align: middle
}

<div id="box5">
<img src="img/ctba.png" alt="扯谈社" />
</div>

淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack：在 IE 下，将字号设置为容器高度的 0.873（本例中即 200*0.873 = 175）图片便会垂直居中；字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题，如 gbk 编码（摘自译飞的博客）

当然如果只是图片，在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。