新人报道。第一次发表这种技术性的文章，作为一个资深小白，我觉得前端是一个很好进入计算机世界的敲门砖，仅凭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;让元素自动找居中的地方。
综上就是目前我所学到的让元素居中的方法，欢迎大家批评纠错。最后很高兴能和大家分享经验。