如果需要居中的是內聯元素的話，給父級元素加上text-align: center即可。
如果是塊級元素，那就給自身加上margin: 0 auto，上下的margin為0，左右auto就會自動居中。
如果多個塊級元素放到一行並居中，你可以使用display: inling-block把他們變成內聯元素，然後再在父級元素上使用text-aline: center。或者使用flex布局，給父級元素加上display: flex; justify-content: center;
如果是內聯元素的話可以讓height和line-height值相等。
如果是塊級元素的話，絕對定位。給自身加上position: absolute; top: 50%; transform: translatey(-50%)，然後給父元素加上position: realtive;。或者使用flex布局，給父元素加上display: flex; flex-direction: column; justify-content: center;。
內聯元素的話，給父級元素加上text-align: center，然後讓自身的height與line-height值相等即可實現。
塊級元素同樣可以使用絕對定位，給自身加上position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，然後給父元素加上position: relative。flex布局同樣適用，給父元素加上display: flex; justify-content: center; align-items: center;。
不知道算不算是翻譯，有的沒寫上因為感覺適用範圍太小。可自行參考css tricks center。
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 實現水平居中 固定寬度塊...
實現垂直居中對齊的幾種方式
這裡主要是記錄下自己之前的筆記，如有錯誤還請指出！行內元素垂直居中 塊級元素 天邊的最後一抹斜陽，黯淡了，無盡的黑暗將要襲來。我陷入了沉思中去。日子一天一天地逝去，從滿心不甘至無可奈何，最終落得個與世訣別。即使再不願，也抵不過光陰的蹉跎，歲月的無情。似一支鋒利的針，刺的多了，也便感覺不到疼了。只眼睜...