CSS的垂直居中和水平居中總結

水平居中設定：

行內元素 設定 text-align:center；

flex布局 設定display:flex;justify-content:center;(靈活運用)

垂直居中設定：

父元素高度確定的單行文字（內聯元素） 設定 height = line-height；

父元素高度確定的多行文字（內聯元素） a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle； b:先設定 display:table-cell 再設定 vertical-align:middle；

水平居中設定：

定寬塊狀元素 設定 左右 margin 值為 auto；

不定寬塊狀元素 a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto； b:給該元素設定 display:inine 方法； c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；

垂直居中設定：

.box

多行文字，此處居中設定span>
div>

.box

.box span

.box

垂直居中
div>
div>

.box

.box:before
.box:after
.box .content

.box

CSS的垂直居中和水平居中總結

css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。水平居中設定 行內元素 設定 text align center flex布局 設定display flex j...

CSS的垂直居中和水平居中總結

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

CSS 垂直居中和水平居中

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