css 高度、宽度居中

行内元素（又叫内联元素inline element）:

①不占据一整行，随内容而定，有以下特点：

②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。

③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。

    常用的内联元素有：

a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调

 

块级元素block element：

①总是在新行上开始，占据一整行；

②高度，行高以及外边距和内边距都可控制；

③宽带始终是与浏览器宽度一样，与内容无关；

④它可以容纳内联元素和其他块元素。

    常用的块级元素有：

div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序列表

互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。

如：

<p style="display:inline; text-align:center">我是被设置了内联的块元素p，我现在的表现形式和内联元素一样啦</p>

<span style="display:block; text-align:center">我是被设置了块级元素的span，我现在可以独占一行并且可以设置宽高</span>

display: table-cell ，能把元素当作表格单元来显示，这个非常实用，显示效果也很好，只可惜某些浏览器不够兼容。要注意，和一个合法的<td>元素必须在<table>里一样，

display: table-cell 元素必须作为 display: table 的元素的子元素出现。

文字水平居中使用：text-align:center;

文字高度居中使用：{  height: 56px;line-height: 56px;}

整个div居中{width:960px;margin:0px auto;}这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的

块元素水平居中：

一、相对定位法

原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;

<style type="text/css">
.centerlist {position:relative;left:50%;float:left;}
.centerlist li {position:relative;right:50%; z-index:2;float:left}
</style>
<ul class="centerlist">
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
    <li><a href="#">Lorem ipsum dolor.</a></li>
</ul>

二、强制内联

<span style="color:#000000;"><style type="text/css">
.centerlist_inline{text-align: center;}
.centerlist_inline li{display: inline;}
</style>
<ul class="centerlist_inline">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul></span>

局限：块级元素改为内联元素，那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。

vertical-align
初始值：　baseline（缺省值）
可否继承：否
适用于：　内联元素
说明：vertical-align:baseline使元素的基线同父元素的基线对齐．
警告：vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样．


请注意,vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的.

相关文章:

CSS里的各种水平垂直居中基础写法心得分享（附内联元素，块级元素的基本概念）

css中水平垂直居中对齐布局一些实例总结