一、文本居中：
对于单行文本我们可以选择text-align对其进行左右居中
上下居中可通过设置和容器同高的行高（line-height）来设置；如下:
如果对一个父元素设置text-align，发现其子元素也能左右居中？？？如下：
但如果我们给他设置宽就会发现，它并不能使他的子元素居中，而是让他的子元素的文本或者图片在子元素中左右居中；如下：
所以，他为什么能够使图片居中，又不能使像div，h3,p…这样的元素左右居中呢？说白了，他只是对文本或者是img这种内联/内联块元素有效，而像div，h3，p这种的都是块状元素；
二、那我们怎么让子元素在父元素中居中呢？
我们可能会想到对父元素设置padding把它挤到中间或者给子元素设置margin，如下：
用margin设置上边距是会产生bug，就是会错误的把上边距的值加在父元素上面，这同样的情况下，我们可以给子元素加上float，如下：
这两种方法确实都很简单，又很实用的样子，但是前提是我们还要提前知道子元素的宽高，但如果是一些不规则的形状，我们并不能确定其宽高的元素该怎么办呢？
这里我们又可以回到text-align；text-align可以使img左右居中，并且可以不用知道img的宽，那我们可以将子元素转换成img的元素类型inline-block啊；如下：
是不是轻易就可以解决左右居中的问题，那如何上下居中呢？
这就要用到inline-block元素中的一个属性：vertical-align，但是vertical-align是按照顶线，中线，底线，基线方式对齐的；我们要设置上下对齐就必须要确定子元素的中线，并且单个的子元素也没办法中线对齐啊。我们就要设一个与子元素同级的元素，并且这个元素也要是中线对齐，所以它也要变成inline-block并且设置vertical-align：middle；如下：
上面画的黑线就是元素中线的大概位置了，也就是两个元素的上下中间，那如何让中线的位置恰好是父元素的上下中间呢？
我们可以让另外一个子元素的高度为父元素的高度，这样中线所在的位置恰好也在父元素的中间了；如下：
像这样，中线就在父元素中间了，但是，另外一个子元素又显得很多余，所以我们可以把另外一个子元素的宽width设置成0；
这样子元素是不是就完全左右上下居中了；
三、用定位实现元素在浏览器左右上下居中
让元素在浏览器左右上下居中，我们可以给元素设置：
position：fixed；
top：50%；
left：50%；
margin：-高度的一半 0 0 -宽度的一半；如下：
但如果不能确定元素的宽高怎么办呢？
我们可以将元素设置成：
position：fixed；
left：0；right：0；
top：0；bottom ：0；
margin：auto；如下：
那如果一个子元素要在比它小的父元素中居中要怎么处理呢？
像这样：如下：
我们也可以利用定位来做；我们先设置成相对定位，然后直接用left：50%；把子元素挤到父元素的右侧；
如下：
然后再在子元素设置margin-left：- 子元素宽的一半；如下：
这样就完成了；在这里插入代码片
