水平居中在布局的時候經常用到，水平居中主要分兩種情況，一種是已知寬度居中，未知寬度居中。
如果已知元素寬度，那水平居中會非常簡單，使用margin:auto即可實現
margin:auto
css:
.margin-middle已知寬度margin:auto水平居中
未知寬度也是比較常用的，實現的方式有多種。
1.float居中
float居中中，父元素和子元素都要這是為float：left，position:relative，不同的是父元素是left：50%，子元素是right：50%。
.float-middle
.box
浮動居中
2.絕對位置居中
絕對位置居中只需要在子元素中設定absolute，並且left：50%，transform：translatex(-50%)即可實現
.absolute-middle
絕對位置居中
如果需要相對于父元素居中，則需要在父元素設定position：relative。
CSS 水平居中和垂直居中的多種實現方法
後面的所有例子，都分為 3 層巢狀 父元素，子元素，內容。其中父子元素都是塊級元素 div。父元素設定屬性display flex justify content center align items center 父元素設定屬性display flex 子元素設定屬性margin auto 父元素...
css實現水平居中的幾種方式
編輯於 2018 05 13 text align center 複製 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊級元素水平居中，通...
css實現水平居中的幾種方式
一 對於行內元素 text align center 二 對於確定寬度的塊級元素 1 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 2 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊...