html元素居中方案

居中问题，就不得不提到块级元素和行内元素。HTML中的所有标记都分为块级元素和行内元素两种，两者的区别是行内元素标记的下一个标记是接在行内元素的后面，而块级元素的下一个标记是在块级元素的下面，就是所谓的“标准流”，最明显的例子就是<span>标记和<div>标记

html 标签居中

1. <center/>标签是html的块元素，将后面的文本和图像居中显示。它仅针对于IE浏览器，并且在IE中不同版本的支持情况不一样，所以其用法简单，但是相应会带来浏览器兼容问题

 

2. 标签的 align="center"属性，设置或获取表格排列。如div，table等标签可以快速使用。但是有许多标签是不支持这个属性，同样也存在兼容问题

CSS居中

1. width:auto 属性， 如果你的标签是没有固定的宽度，那么width:auto已经足够了；那如果是固定宽度了，那就加上margin:0 auto 或者margin-left:auto; margin-right:auto;这两种方式是等效。现在浏览器 如IE 9+,firefox, chrome,360等基本上都可以很好的实现。在低版本的浏览器中还存在一些问题。

 

2. 如果是img图片居中，那么可能的使用align ="middle" 加上垂直居中verticalAlign="middle",但是在使用它时要注意，有时会影响你的文字布局。

 

3. 文字居中或者子元素居中  text-aligh:center 这个属性在文字居中很实用，也是最常用的属性之一。当然有时还要结合display=inline。

 

4. 在绝对定位position:absolute中，居中问题稍微麻烦一点，我们可以先将左偏移设置为页面分辨率一半 left =“50%”， 然后可以将左边界（负边界）设置为容器的宽度一半margin-left：-（width/2）如：这种方式可以很好的兼容现代，低版本的浏览器（IE6或IE6+）。

 

[css] view plain copy

 

1. #container {  
2.    position: absolute;  
3.    left: 50%;  
4.    width: 800px;  
5.    margin-left: -400px;  
6. }  

5. 在相对定位中position:relative也同样可以采用上述方式，首先给父元素设置float:left; position:relative;然后将父元素的左偏移设置为： left =“50%”，在子元素设置position:relative; left:-50%。

JS元素居中

使用此种方法注意页面在onresize时事件处理和js的浏览器兼容问题，建议使用jquery等js库.

[javascript] view plain copy

 

1. var divWidth = obj.offsetWidth;    
2.   
3. var divHeight = obj.offsetHeight;    
4.   
5. var divLeft = parseInt((screenWidth - divWidth) / 2);    
6.   
7. var divTop = parseInt((screenHeight - divHeight) / 2);    

 '

div水平垂直居中

div 父容器

{

height:100%;
width:100%;
margin:0;
padding:0;
border:0;

}

div

{

position:relative;
margin:auto;
height:500px;
width:500px;
top:50%;
margin-top:-250px;

}