在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個小方法:
設定 display;inline 方法
設定 position:relative 和 left:50%;
垂直居中
a).父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。
height:100px;line-height:100px;
居中方式總結
居中在網頁布局常能看到，經過一周的學習，深感居中方式之多，故總結為以下文字。一 水平居中 1.1定寬塊元素在塊元素之中的水平居中 父元素為塊元素，子元素同為塊元素且寬度確定 包括使用px或 確定寬度 對子元素css樣式中新增即可 1.2內聯元素在塊元素之中的水平居中 對塊元素 父元素 新增css樣式...
CSS居中方式總結
一 水平居中 1 行內元素或者display為inline的塊級元素，前提是子元素沒有float 對父元素設定 text align center 2 塊級元素 已知寬高 1 元素自身設定為 margin 0 auto 2 利用絕對定位和margin結合的方式 elem 3 塊級元素 未知寬高 1 ...
CSS居中方式總結
1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...