在 css 中居中是乙個常見的問題，也是乙個基本問題。既然是常見的基本問題，那真是有必要加以研究和加以總結。
text-align:center估計是最古老 css 居中技術了。 適用於文字，span,a等行內元素。
這一技巧也是適用於行內元素。 具體的實現是將line-height設定成跟元素高度一致來實現行內元素的垂直居中。 詳情見示例中.primary-button類的 css。
以前塊級元素居中常用的技術便是通過如下的設定來實現塊級元素的水平居中.(此法不適用內聯塊級元素)
div
複製**
為了啟用絕對定位，先將父元素設定為相當定位。
元素設定類似如下屬性
margin:auto;
position: absolute;
left: 0;
top: 0;
bottom:0;
right: 0;
width:160px;
max-height:50px;
複製**
margin-left: 50%;
transform: translatex(-50%);
複製**
margin-top:50%相當於margin-top: 最近的塊元素容器的寬度,所以margin中的百分比的計算方式限制其無法應用於垂直居中.
flex 布局技術的出現，解決了 css 沒有正式的居中布局技術的尷尬。 以flex-direction的預設設定flex-direction:row為例。justify-content:center可實現水平居中對齊，align-items:center可實現垂直居中對齊。 flex 作為通用的布局技術，居中只是其中的一點點組合特性。
值得注意的是，除了使用 flex, css 中沒有其他的通用的垂直居中的技術。
CSS水平和垂直居中技術
行內元素的水平居中 text align center 在父元素中設定 塊級元素的水平居中 margin 0 auto 行內元素的垂直居中 line height 父元素的高度 在父元素中設定 vertical align middle 用於垂直對齊inline元素 例如將乙個icon與文字對齊。浮...
css居中技巧
1text align center 只能對，按鈕，文字等行內元素 display為inline或inline block等 進行水平居中。在ie6 7中能對任何元素進行水平居中。另外它是把屬性應用給容器，對內部所有內容起作用，所以不是很好控制，但方法相容大多數瀏覽器用到的也很多。css 這裡有個新...
流技術小結
按照資料流的方向分，分為輸入流和輸出流 按照處理資料的單位來分，分為位元組流和字元流 按照功能來分，分為節點流和處理流 inputstream 位元組輸入流，實現類 fileinputstream outputstream 位元組輸出流，實現類 fileoutputstream file file ...