1.水平居中。
（1）給父元素設定text-align:center；該方法只適合於行內元素。
（2）給自己本身設定margin:0 auto;該方法只適合塊級元素。
（3）給父元素設定display:flex;justify-content:center;該方法適合塊級元素和行內元素。
（4）給自己本身設定margin-left:50%;transform:translatex(-50%);該方法適合塊級元素和行內元素。其中transform:translatex(-50%);代表向左移動自身的一般寬度。
2.垂直居中。
（1）給父元素設定line-height:高度;適合行內元素。
（2）給父元素設定display:flex;align-items:center;適合塊級元素和行內元素。
（3）給自身設定margin-top:50%;transform:translatey(-50%);該方法適合塊級元素和行內元素。
(4) 子絕父相，並且子left:0;right:0;top:0;bottom:0;margin:auto;則可實現子元素垂直水平都居住。
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 ...