用css實現水平居中和垂直居中

1.行內元素（inline性質）可以使用：text-align: center;

2.單個塊級元素：margin-left和margin-right為auto；（margin: 0 auto;）

3.多個塊級元素：設定不同的display屬性，設定為inline-block， 乙個是設定為flexbox（或margin: auto）

.inline-block-center 

.inline-block-center div 
.flex-center

1.行內元素或者文字顯示為垂直居中，僅僅是因為它們的上下內邊距相等：

2.padding 出於某些原因不能用，並且你要使一些不換行的文字居中，這裡有乙個技巧，就是設定文字的line-height和height的值相等。

3.多行可以考慮

①.vertical-align:middle，

②. display: flex; justify-content: center; flex-direction: column;(適用于父容器具有乙個固定的額高度)

③."虛元素"?

其中乙個完整高度的偽元素放置在容器內，並與文字垂直對齊。

.ghost-center 

.ghost-center::before 
.ghost-center p

知道高度

.parent 

.child

.parent 

.child

其他：1.用負的margin值使其等於寬度和高度的一半，設定它的絕對位置為 50% 

2.transform屬性，用translate設定 -50%（它以元素當前的寬和高為基礎）來居中：

3..parent

CSS實現水平居中和垂直居中

行內元素 為父元素設定中 text align center 樣式 style text align center 行內元素水平居中span div 定寬塊級元素 定義元素左右margin為auto style width 100px height 100px background color gr...

CSS 垂直居中和水平居中

position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...

CSS垂直居中和水平居中

總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...