在HTML网页排版经常会用到关于对其方式的情况，水平居中和垂直居中。特别是水平居中，并不是一个简单的text-align就可以解决所有的情况。

　　开始之前普及一点HTML知识，目标很明显，不同的页面结构情况下，要达到居中的效果方式不同。



常用的块状元素有：

　　　　<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>......此外为标签设置display:block也可强制将其他元素转化成块状元素。

　　　　常用的内联元素有：

　　　　<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>......当然块状元素也可以通过代码display:inline将元素设置为内联元素。

　　　　常用的内联块状元素有：

　　　　<img>、<input>.....代码display:inline-block就是将元素设置为内联块状元素。



默认状态下，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，宽度都为100%，即以行的形式占据位置。内联元素都会在所处的包含元素内从左到右水平分布显示。

水平居中

a).如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置  text-align:center

　　当被设置元素为块状元素时用 text-align：center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。

　　b).定宽块状元素，对其板块本身进行设置：



width:500px;
margin:20px auto;



c).不定宽块状(这是最常遇到的情况)，可以细分为3个小方法:

  • 加入 table 标签
  • 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
  • 设置 display;inline 方法
  • 改变块级元素的 dispaly 为 inline 类型  display:inline; ，然后使用  text-align:center ;
  • 设置 position:relative 和 left:50%;
  • 通过给父元素设置 float，然后给父元素设置  position:relative  和  left:50% ，子元素设置  position:relative  和  left:-50%

　　垂直居中

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。



height:100px;
    line-height:100px;



　　　b).父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

  • vertical-align：middle
  • 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的  display:table-cell;