CSS實現元素水平 垂直居中的方法

首先，我們來了解水平居中,它有很多種方法，我們暫時先來了解其中的幾種：

1.    在實現方案中，我們最熟悉的莫過於給元素定義乙個寬度，然後使用margin：

body

這個是當我們的定義元素的寬度時顯現的，

如果我們不能定義寬度時，該怎麼辦呢？

2.    我們對於定位也是常用的，在這裡當然也可以採用定位的方法來實現：

body

3.   既然定位可以，那浮動也是可以的：

body

4.    對於幾個元素同時居中在一條線上：

body

5.    利用table:

ul

ulli

6.    還可以使用inline-block來實現，但要使用這個就得在其父元素上設定text-align.如下：

body

.content

實現垂直居中的四種方法：

1.    只能是單行文字居中（可適用於所有瀏覽器）：

.content

2.    跟水平居中一樣，垂直也可以用定位的方法：

.content

或者.content

定位的方法，它的缺點是當沒有足夠的空間時，元素會消失。

3.    對此，浮動也是可以的：

.content

.footer

對於浮動，我們需要在之後清除，並顯示在中間。

4.    也可以使用vertical-align屬性：

.content

這種方法可以隨意改變元素高度，但在ie8中無效。

現在來看個div模組在螢幕中居中的例子：

position: absolute;  top: 50%;  left: 50%;	//上下移動螢幕的50%

margin: auto;
-webkit-transform: translate(-50%,-50%);   //減去自身的50%（多移動的）
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

css實現元素水平垂直居中

利用負邊距實現子元素居中 相對于父元素 position relative 需已知子元素的width與height 且把子元素的position設為absolute，絕對定位 以及設定left和top為50 再加上負邊距，margin left值為width的一半，同樣的，margin top值為h...

css實現元素垂直水平居中

css實現垂直居中的方法 方法一 父元素display flex 子元素margin auto auto fa son 方法二 父元素display flex 並設定justify content center align items center fa son 方法三 在不改變父元素的前提下，只修...