方式一：css3 transform
.parent
.child
方式二：flex 布局
.parent
適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。
居中的元素為常規文件流中的內聯元素(display: inline)
常見的內聯元素有：span, a, img, input, label 等等
.parent
居中的元素為常規文件流中的塊元素(display: block)
常見的塊元素：div, h1~h6, table, p, ul, li 等等
方式一：設定 margin
.parent
.child
方式二：修改為 inline-block 屬性
.parent
.child
.child
方式一：
.parent
.child
方式二：
.parent
.child
方式一：css3 transform
.parent
.child
方式二：flex 布局
.parent
適用於子元素為浮動，絕對定位，內聯元素，均可垂直居中。
.text
方式一：
.parent
.child
方式二：
.parent
.child
div
優點：1.不僅可以實現在正中間，還可以在正左方，正右方
2.元素的寬高支援百分比 % 屬性值和 min-/max- 屬性
3.可以封裝為乙個公共類，可做彈出層
4.瀏覽器支援性好
.child
特點：1.良好的跨瀏覽器特性,相容 ie6 – ie7
2.靈活性差，不能自適應，寬高不支援百分比尺寸和 min-/max- 屬性
.child
特點：1.內容可自適應，可以封裝為乙個公共類，可做彈出層
2.可能干擾其他 transform 效果
.parent
這是 css 布局未來的趨勢。flexbox 是 css3 新增屬性，設計初衷是為了解決像垂直居中這樣的常見布局問題。
text
CSS布局 居中等其他小技巧
浮動 在css中，左右布局可用浮動布局，若有以下結構 parent left right 複製 設定浮動，並在父級元素中新增 clearfix 類，清除浮動 clearfix after left,right 複製 position絕對定位 為父元素設定position relative 為子元素設...
CSS 居中布局
居中在平時的運用很多，以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度，已知子元素寬度 高度.con...
CSS居中布局
方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。常見的內聯元素有 span,a,img,input,label 等等 parent 此方法同樣適用於 display inline block ...