44年前我們把人送上月球，但在css中我們仍然不能很好實現水平垂直居中。
水平垂直居中有相同點也有不同點，接下來討論常見的方式。
如無特殊說明，以下示例html均為：
class
="md-warp">
class="md-main">
span>
複製**
.md-warp
.md-main複製**
.md-main複製**需要滿足三個條件：
.md-warp
.md-main複製**
有些時候我們的元素寬度可能不是固定的，不用擔心，我們依然可以使用定位法實現水平居中，此時需要用到css3中的transform屬性中的translate，可以使元素移動時相對於自身的寬度和高度。
需要注意，這種方法需要ie9+才可以實現。
.md-warp
// 注意此時md-main不設定width為100px
.md-main複製**
不定寬對於單行文字來說，直接使用text-align: center即可。
多行文字可以看作乙個塊級元素參考margin法和定位法。
和水平居中類似，只是把left:50%換成了top:50%，負邊距和transform屬性進行對應更改即可。
優點：能在各瀏覽器下工作，結構簡單明瞭，不需增加額外的標籤。
.md-warp
.md-main複製**
運用css3中的clac()屬效能簡化部分**：
.md-warp
.md-main複製**
.md-warp
.md-main複製**
不定高需要滿足兩個條件：
這是一段文字span>
div>
複製**
div
span複製**
以上是一些常規辦法，接下來是利用css3新特性實現的示例。
如果想避免使用絕對定位，我們仍然可以利用translate()方法，其值剛好是元寬度和高度的一半。但是，我們如何不使用top和left將元素從top和left移動50%的偏移量呢？
首先想到的是給margin屬性乙個百分數，像這樣：
.md-main複製**我們發現並沒有出現預想的結果，這是因為margin的百分比計算是相對于父容器的width來計算的，甚至包括margin-top和margin-bottom。
我們如果仍然想讓元素在視窗中居中，還是有救的。css3定義了一種新的單位，稱為相對視窗長度單位。
以下摘自w3cplus在上個示例的基礎上，我們需要給
vw是相對於視窗的寬度。與你預期剛好相反,1vw相當於視窗寬度的1%，而不是100%與
vw相似的是，1vh相當於視窗高度的1%如果視窗的寬度小於高度，
1vmin等於1vw，反之，如果視窗寬度大於高度，1vmin等於1vh如果視窗的寬度大於高度，
1vmax等於1vw，反之，如果視窗寬度小於高度，1vmax等於1vh
margin設定vh單位:
.md-warp
.md-main複製**
如果不考慮瀏覽器的相容性，flexbox無疑是最好的解決方案，因為它的出現就是為了解決這樣的問題。
完成這項工作只需要兩個樣式，在需要水平垂直居中的父元素上設定display:flex和在水平垂直居中的元素上設定margin:auto。
.md-warp
.md-main複製**
flexbox的實現文字的水平垂直居中同樣很簡單。
.md-warp
.md-main複製**
我是字啊
補充：
.md-warp
.md-warp:before
.md-main複製**
引自demo.doyoe.com/css/alignme…首先要了解垂直方向的對齊排版需使用 vertical-align ，並且只應用於inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的對齊就基於每個 line box（行框） 的，簡單的說，inline level元素按照 normal flow 水平排版出一行就會形成乙個line box，其高度由內容形成，如果換行，則又是另乙個line box，所有一段文字可能會分布在多個line box裡，這些不重疊的line box被稱作為a vertical stack of line boxes（乙個垂直堆疊的線框集合）這些。
換句話說，我們的垂直居中是要在每個line box中進行處理。而上例中我們想讓一行文字在名叫demo的高100px的容器裡垂直居中，這時有個問題就是demo容器並非該行文字的line box，所以就算定義vertical-laign為middle也無法讓該行文字在demo容器中垂直居中。我們知道line box的高度是由內容形成的，這時我們可以額外建立乙個與該行文字處於同一line box的元素，同時將新增元素的高度定義為與demo容器相同，此時line box的高度將與demo一致，文字將會在line box內垂直居中，即同樣實現了在demo容器中垂直居中。
.md-warp
.md-main複製**
以上各種方法稍加組合即可同時實現水平和垂直居中，這些就是平時用到較多的一些居中的方法，希望大家看完之後有收穫:)
網線製作也不簡單
網線製作背後更深層的東西 我們平時製作網線時一般都為直連網線或者交叉網線 製作方法如下 正線 標準568b 兩端線序一樣，線序都是 白橙，橙，白綠，藍，白藍，綠，白棕，棕。1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 即直連線 反線 568a 即交叉線 一端為正線的線序，另一端為 ...
把一件簡單的事情做好你就不簡單了
來自上海德佑地產部落格 我就是一名房地產經紀人！不是中介，誰能明白我們呢？每當夜深人靜時，如果你在路上遇到乙個,兩個甚至一群穿著白襯衣黑西褲職業裝，拖著疲憊的身軀,臉色有些憔悴，像剛下班的樣子,那他很有可能就是做房產經紀人的 不要驚訝他為什麼這麼晚才下班，因為他們的工作時間是早上的九點半鐘到晚上的九...
python3 說簡單也不簡單的排序演算法
在剛開始接觸演算法時,我們可能一臉懵,不知從何處下手,尤其是現在使用的語言五花八門,各種語言的實現又不盡相同,所以,在這種情況下,千萬不能迷失了自己,掌握了演算法的原理,就像解數學公式一樣,定理給你了,仔細想想便可以用 來實現它,前提要養成良好的解題思路.下面我們來從入門的排序演算法開始 以下都是針...