css 方式讓乙個容器水平垂直居中

div.center

div.center img

paddingmargin-topmargin-bottom

div.center 

div.center img

table

.center-aligned 

.center-core 
.center-core img

htmlbodybody

height

.absolute-aligned 

.absolute-aligned img

.center 

.center img

外部容器需要設定height（或者用其他方式設定），因為不能獲取 絕對定位 的內容的高度。

如果內容包含文字，現在的瀏覽器合成技術會使文字模糊不清。

.center 

.center img

display: table-cell

.center 

.center img

top: calc(50% - (40% / 2));

left: calc(50% - (40% / 2));

.center img

.absolute-aligned 

.absolute-aligned img

七種CSS方式讓乙個容器水平垂直居中

方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin auto 方法六...

七種css方式讓乙個容器水平垂直居中

閱讀目錄 方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin aut...

七種css方式讓乙個容器水平垂直居中

閱讀目錄 方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin aut...