容器的居中显示在网页设计中是很常见的，居中显示可以获得视觉的焦点，是内容更加突出，下面就简单的说明一下如何在HTML中通过样式的控制来实现
01最常见的一种，代码示例如下图，首先，取big一半像素大小赋给small层，通过margin: 0 autotext-align: center来实现
02第二种方法，代码示例如下图，将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2，也就是125即可
03第三种方法，代码示例如下图，将big层的position设置为absolute，然后small层的margin-left取（500-250）/2，也就是125即可
04第四种方法，通过display:flex实现，代码示例如下图，big层display:flexflex-direction:column而small层align-self:center
05第五种方法，在small层的宽度没有的时候，可以通过width:fit-content这个设置来完成，代码示例如下
06第六种方法，通过display:inline-block来实现，将这个设置赋给big层即可，代码示例如下图
07第七种方法，设置big层position:relative，相对情况下，使small层左浮动，代码示例如下
08第八种方法，transform属性，代码示例如下
09第九种方法，借助第三方样式，比如增加一个add节点，水平浮动向左，使small层随之浮动，代码示例如下
特别提示每种方法都适应不同的运行环境，实际操作时需要考虑不同浏览器的解析时的兼容性
前言：根据最近学习的课程，简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。给所有子元素添加 float: left ，给父元素加 clearfix 类，清除浮动
html:
css:
将内联元素外部的块级元素的 text-align 设置为 center ，即可实现内联元素（ inline 、 inline-block ）的水平居中。
演示
将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ，即可实现块级元素的水平居中。
演示
将每个块级元素的 display 设置为 inline-block ，然后将它们的父容器的 text-align 设置为 center ，即可使多个块级元素水平居中。
演示
设置内联元素的行高（ line-heigt ）和内联元素的父元素的高度（ height ）相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。
演示
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，即可实现垂直居中。
演示
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
演示
CSS有float:left和float:right，但能否实现float:center呢？水平居中浮动，当然是可以的，这里将介绍你实现方法。以下面的Li列表为例，我们要实现中间LI的居中浮动：
1 <div id="macji">
2 <ul class="macji-skin">
3 <li>列表一</li>
4 <li>列表二</li>
5 <li>列表三</li>
6 </ul>
7 </div>
我们需要先了解下position:relative属性，它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relativeleft:50%，再让li向左浮动，再让position:relativeright:50%（或者left:-50%），那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。
view source
01 #macji{
02 position:relative
03 width:100%
04 height:80px
05 background-color:#eee
06 text-align:center
07 overflow:hidden
08 }
09 #macji .macji-skin{
10 float:left
11 position:relative
12 left:50%
13 }
14 #macji .macji-skin li{
15 position:relative
16 right:50%
17 float:left
18 margin:10px
19 padding:0 10px
20 border:solid 1px #000
21 line-height:60px
22 }
虽然这样用有些麻烦，但对于一个优秀的前端设计师，这个技巧还是有必要掌握的哦。
