先給出html結構
我是子元素
.par
.child
inline-block這樣既可以像塊元素一樣設定盒模型，又可以像行內元素一樣試用text-align：center進行居中
將子元素設定為inline-block後，子元素為塊級元素，寬度為內容寬度
.par
.child
table元素是塊級元素，寬度自適應為內容寬度，所以通過display:table對子元素進行轉換並設定塊元素居中標配margin:0 auto
.par
.child
原理很簡單，先用絕對定位將子元素置於距父元素左邊界一半的位置，然後再將子元素向左移動自身的一半，達到居中效果
注意，position:relative將父元素設為子元素絕對定位的參照物
.par
.child
flex-grow屬性預設值為0，flex-basis屬性預設值為auto，所以寬度為內容寬度(在沒有設定指定值時，否則為指定值)
順便說一句，flex很強大
高度為元素高度，就不指定具體值了
.par
.child
.par
.child
.par
.child
.par
.child
.par
.child
.par
.child
html 居中布局
需求，有三個內容需要居中顯示 內容居中，我們太熟悉了 content1,content2,content3 這樣，三個內容都居中了。然後，當content1 內容裡面的h1,距離頂部有50個畫素的時候，怎麼寫？第一反應，用margin title但是，緊鄰的塊級元素會發生margin collaps...
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 ...