行內元素
為父元素設定中』text-align:center』樣式
style="text-align: center">
行內元素水平居中span>
div>
定義元素左右margin為auto
style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
div>
div>
a. 將塊級元素加入標籤
例如：
style="margin: 0 auto">
設定table實現水平居中div>
td>
tr>
tbody>
table>
display:inline，然後再為父元素新增text-align:center樣式
例如：
style="text-align: center">
style="display: inline">
設定inline實現水平居中
div>
div>
style="float:left;position:relative;left:50%";設定塊級元素樣式為style="float:left;position:relative;left:-50%"
例如：
設定relative實現水平居中
div>
div>
父元素高度確定的單行文字
將父元素height與line-height設定為相同值
例如：
style="height: 100px;line-height: 100px">
設定行高實現垂直居中
div>
a. 使用標籤
style="height:40px;width:200px;background:#ccc">
style="text-align:center">設定table實現垂直居中p>
style="text-align:center">設定table實現垂直居中p>
div>
td>
tr>
tbody>
table>
display:table-cell;樣式，並設定vertical-align:middle
style="width: 200px;display: table-cell;height: 200px;vertical-align: middle;background-color: #cccccc">
設定table-cell實現垂直居中p>
設定table-cell實現垂直居中p>
div>
/*要垂直居中的元素*/
.middle
/*垂直居中元素的父元素*/
.parent
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 ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...