css 字型垂直 水平居中

也可以這樣

父元素position: relative;

子元素position: absolute; 相對于父元素 left: 50%;top:50%; 相對於自身偏移 transform: translate(-50%, -50%);

啦啦啦

.tt

去掉display可就不行了哦！！

首先，依舊是概念。介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。

不佔據一整行，隨內容而定，有以下特點：

不可以設定寬高，也不可以設定行高，其寬度隨著內容增加，高度隨字型大小而改變。

內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用。

也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用。

常用的內聯元素有：a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，font - 字型設定(不推薦)，i - 斜體，img - ，input - 輸入框，label - **標籤select - 專案選擇，small - 小字型文字，span - 常用內聯容器，定義文字內區塊，strike - 中劃線，strong - 粗體強調

高度，行高以及外邊距和內邊距都可控制;

寬度始終是與瀏覽器寬度一樣，與內容無關;

它可以容納內聯元素和其他塊元素。

常用的塊級元素有：div -最常用的塊級元素，dl - 和dt dd搭配使用的塊級元素，form - 互動表單，h1 - 大標題，hr - 水平分隔線，ol - 排序表單，p - 段落，ul - 非排序列表互相轉換：使用display設定可以使得行內元素擁有塊級元素的特性，反之也可以。

這個屬性只能作用於塊元素(或者被css控制為塊元素的內聯元素，但是被控制為內聯元素的塊元素是不行的)。

自身水平居中(確定設定了寬度的塊)：margin。這個肯定是接觸css一開始就知道的了。

一般情況下，可以設定margin:0 auto;

這會使這個塊級元素在它的父級元素中居中，上下左右都會居中。

如果只要水平居中的話，就設定margin-left:auto;margin-right:auto;

4. vertical-align用於行內元素中的垂直居中

vertical-align，這個可以用的很複雜。只說一下最簡單的用法：

這個屬性用於

內聯元素(以及被轉化為內聯元素的塊元素)

display設定為table-cell的元素，

在 firefox 和 ie8 下，可以設定塊級元素的 display 值為 table-cell，來啟用 vertical-align 屬性，顯示效果和就和**中的 valign="center" 一樣了。但 ie6,7 並不支援。

3、這樣的元素

只要具有行內元素的特性的元素使用這個屬性，對它的子元素中的文字和也是起作用的。

但是作用效果為使得文字或者相對於緊靠著它們的父元素來進行居中。

這個和text-align上面說過的部分是類似的。

5 塊級元素中的文字垂直居中(針對塊的高度確定的，如果塊內只有這些文字的話)

我們這裡有個比較巧妙的方法就是:設定height的高度與line-height的高度相同!

7 塊級元素自身的垂直居中

也可以採用vertical-align:middle;的方式，但是前提是把display設定為table-cell。這樣的話要注意瀏覽器相容性問題。

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...