新人報道。第一次發表這種技術性的文章，作為一個資深小白，我覺得前端是一個很好進入計算機世界的敲門磚，僅憑HTML和CSS你就能輕松寫出你所能看見各類網站的靜態頁面。還沒接觸前端之前，我和很多人一樣只是計算機世界的旁觀者，一直也覺得計算機高深莫測，非吾等所能觸及。但當你開始進入它的世界的時候，你就能感到他的魅力所在--給你無窮的創造力與成就感。雖然對一個才學不久的小白來說成就感有點可笑，但是這也許是計算機的魅力吧，他不拒絕任何想了解它的人。
閑話少敘，接下來分享一個“技術“”性的‘干貨’。我們知道CSS是用來裝飾HTML網頁的，HTML網頁則是由一系列標簽所組成，而css的功能就是讓這些標簽能夠穿上衣服展示在人們的面前，並且能夠控制這些穿上“衣服”的標簽之間的位置關系。我們總是會想讓一個元素在中間顯示，因為這會使你的網頁更加美觀。
一.如何讓一段文本在容器中左右居中
例：<p>這是一段文本</p>
p標簽通常是放置文本的容器（標簽），我們想讓這段文本在容器中左右居中該怎么做呢？CSS中有一個屬性text-align;它是用來設置【文本對齊方式】，他的屬性值有left/center/right/justify;分別為左對齊/居中對齊/右對齊/兩端對齊；所以只需在樣式表里添加聲明p{text-align:center;}就能實現文本的居中了，是不是很神奇？嘿嘿；
二.如何讓一段文本在容器里上下居中呢
例：<p>這是又一段文本</p>
又是這個p，那我們現在想讓這段文本在p中上下居中又該怎么做呢？ 不出意外CSS中還有一個屬性line-height；它用來設置文本的行高的。現在我們先給p設定一個高度：p{height:200px;}。line-height的屬性值為像素（px）;我們只需把它的值設為容器的高度就能實現文本的上下居中了。如：p{line-height:200px;}
【切記：這只針對單行文本 ，那多行文本要實現上下居中呢？我們一般讓它老爸（父元素）居中就OK了--參考下面方法四、五！！】；
三.文本上下左右居中的方法
例：<p>這是又又一段文本</p>
聰明的寶寶已經知道怎么辦了吧？我就不說了。。。
（只需將一二方法結合：添加兩個屬性 p{text-align:center;line-height:p的高度值；}就能實現了。不過這依然是針對單行文本哦！）
四.屬性vertical-align實現元素上下左右居中的方法
首先這個vertical-align是個啥呢，官方定義是這樣的：【該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。】
怎么碩呢？官方就是官方，總能含糊其辭糊弄我們。首先我們得搞懂啥是基線：在瀏覽器中的文本有這么幾條線
如圖就是那幾條基本的線了，所以意思就是如果一個行內元素（注意是行內元素）在一個容器里面它的對齊方式就參考這些線條來進行對齊；vertical-align的屬性值有：baseline/middle/text-top/text-bottom/top/bottom/sub/sup/%; 當然還有一些線條未畫出，因為時間有限（還要去敲代碼寫作業）；這里我們只用到middle這個屬性值，所以就直接來講他吧，看代碼→
這里可以看到文本與span這個標簽中間對齊，那為什么沒有在容器的中間，我們回到官方的解釋，他說【該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊】，我們設置了middle屬性值就表示span會找到文字的中線進行【互相】對齊。當我們將span的 高度設置與父元素同高，文本看起來就會在容器的中間。所以就可以利用這一點來實現一個不是行內元素的塊
元素來在父元素中上下對齊。看代碼→
我故意留了span一像素的寬度是方便大家觀看。這里有幾點需要注意的是：
1.使用這種方法必須將塊元素進行元素類型轉換，轉換為display:inline-blockl;讓他具有行內元素的特性；
2.p元素（也就是進行居中的元素）后面緊接的span不能換行或者有空格，因為行內元素並排排列會有間距；
3.父元素添加text-align屬性實現子元素左右居中；
4.進行居中的元素和span都必須添加 vertical-align:middle;才能實現上下居中；
5.span的寬度設置為0；
綜上就是第四種方法了，確實麻煩；其實我們有更簡單的方法，那就是定位！！
五.定位實現元素上下左右居中的方法
用定位就簡單多了，所以這也是我們常用的方法，用定位只要幾行代碼即可實現：
<style>
div{
position:relative;/*給父元素添加相對定位形成參照物*/
p{
width:100px;height:100px;background:orange;
position:absolute;/*子元素添加絕對定位*/
left:0;right:0;
top:0;bottom:0;
margin:auto;}
是不是很簡單，原理也很簡單，絕對定位會讓元素脫離文檔流，然后給他加方位值就能設定元素所在的方位。上下左右間距都為0；然后設置margin:auto;讓元素自動找居中的地方。
綜上就是目前我所學到的讓元素居中的方法，歡迎大家批評糾錯。最后很高興能和大家分享經驗。