CSS中居中的方法

首先明確行內元素（inline）、塊級元素（block）、行內塊元素（inline-block）的區別和聯絡。

行內元素

塊級元素

行內塊元素

放置方式

與其他行內元素位於同一行

每個塊元素獨佔一行（除非用一些方法來脫離文件流，如浮動 float 或定位）

與其他行內元素或行內塊元素位於同一行

寬高設定

不可以自定義寬高，只能通過文字或來決定寬高

可以自定義寬高，如果寬度不設定，預設為父容器的寬度（即 width: 100%）

可以自定義寬高

間距設定

左右間距可以設定，但是頂部和底部的間距不可設定

上下左右的間距都可以設定

上下左右的間距都可以設定

常見元素

span、img、a、label、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下劃線）、button

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，html5新增的header、section、aside、footer等

在css中，我們可以通過display對這三種元素進行轉換：

display: block;

設定為塊級元素

display: inline;

設定為行內元素

display: inline-block;

設定為行內塊元素

1. 行內元素

text-align: center;

div

#div1
#div2

margin: 0 auto;

position: absolute;

left: 50%;
transform: translatex(-50%);

1. 塊級元素:定高

height: 100px;

position: absolute;
top: 50%;
margin-top: -50px;

position: absolute;

top: 50%;
transform: translatey(-50%);

1. 不定高:

這些文字會把son的高度撐開這些文字會把son的高度撐開

.father 

.son

.father 

.son

.father 

.son

.father 

.son

將父盒子設定為伸縮盒子,可以實現水平-垂直居中:

.father

單獨設定某乙個子元素垂直居中：

.son:first-of-type

.father 

.son 
.son:first-of-type

Css 居中的方法

css實現居中的方法 1.水平居中 text alian center 2.垂直居中 1 這個方法讓一些 顯示成table，然後我們就可以利用table的vertical align屬性了 vertical align作用在其他一些元素上會表現得非常不一樣 id cell class content...

關於CSS中的居中方法

水平居中 text align center 垂直居中 使行高的高度等於整個塊級元素的高度 有侷限性 文字只有一行時適用 height 20px line height 20px margin 0 auto 前提 該塊級元素設定了寬度 position relative left 50 width ...

css中垂直居中方法

水平居中 text align center 塊級元素水平居中 採取絕對定位方式 自適應塊級元素水平居中 借助css3的變形屬性 transfor 來完成 content 行內元素垂直居中 單行文字的垂直居中 1.元素的寬度和行高相等時，文字呈現垂直居中 多行文字的垂直居中 1.不固定高度的垂直居中...