1、绝对定位+margin：auto
<style type="text/css">
.wrp { background-color: #b9b9b9 width: 240px height: 160px }
.box { color: white background-color: #3e8e41 width: 200px height: 120px overflow: auto }
.wrp1 { position: relative}
.box1 { margin: auto position: absolute left: 0right: 0top: 0bottom: 0 }</style><div class="wrp wrp1">
<div class="box box1">
<h3>完全居中层1：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>1234567891011121314151617181920212223242526
效果：
实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块（绿色）的尺寸需要可控,因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-height、max-width，都是让尺寸不会扩大到与父级一样。
2、绝对定位+margin反向偏移
</style><style type="text/css">
.wrp2 { position: relative}
.box2 { position: absolute top: 50%left: 50% margin-left: -100px/* (width + padding)/2 */
margin-top: -75px/* (height + padding)/2 */
}</style><div class="wrp wrp2">
<div class="box box2">
<h3>完全居中方案二：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>12345678910111213141516
效果：
实现原理：由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对父对象的，所以需要手动计算定值指定margin值。这个方案需要固定尺寸值，以此来计算margin反向偏向值，所以方案2比方案1稍差！
3、绝对定位+transform反向偏移
<style type="text/css">
.wrp3 { position: relative}
.box3 { margin: auto position: absolute top: 50%left: 50% -webkit-transform: translate(-50%, -50%) -ms-transform: translate(-50%, -50%) transform: translate(-50%, -50%) }</style><div class="wrp wrp3">
<div class="box box3">
<h3>完全居中方案三：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3></div>12345678910111213141516
效果：
实现原理：方案3与方案2原理一样！不同点是使用了transform来代替margin做反向偏移，由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移。这个方案也需要固定尺寸值，浏览器以此为基准来计算定位！
4、display：tabel
<style type="text/css">
.wrp4 { display: table}
.subwrp4 { display: table-cell vertical-align: middle }
.box4 { margin: auto overflow-wrap: break-word height: auto max-height: 80% max-width: 80% }</style><div class="wrp wrp4">
<div class="subwrp4">
<div class="box box4">
<h3>完全居中方案四：</h3>
</div>
</div></div>123456789101112131415161718192021
效果：
实现原理：方案4是实现效果比较好的，居中块的尺寸可以做包裹性，缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-height、max-width，而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的，所以会直接显示max-width，也就是宽度趋大。
5、display: inline-block
<style type="text/css">
.wrp5 { text-align: center overflow: auto }
.box5 { display: inline-block vertical-align: middle width: auto height: auto max-width: 90% max-height: 90% }
.wrp5:after { content: '' display: inline-block vertical-align: middle height: 100% margin-left: -0.25em /* To offset spacing. May vary by font */
}</style><div class="wrp wrp5">
<div class="box box5">
<h3>完全居中方案五：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>12345678910111213141516171819202122232425262728
效果：
实现原理：原理：利用inline-block的vertical-align: middle去对齐after伪元素，after伪元素的高度与父对象一样，就实现了高度方向的对齐。方案5实现效果更加好，居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）。方案4的居中块可以设置 max-height、max-width，而且居中块是可以具有水平垂直两个方向的自适应。
6、display: flex-box
<style type="text/css">
.wrp6 { display: -webkit-flex display: -moz-box display: -ms-flexbox display: -webkit-box display: flex -webkit-box-align: center -moz-box-align: center -ms-flex-align: center -webkit-align-items: center align-items: center -webkit-box-pack: center -moz-box-pack: center -ms-flex-pack: center -webkit-justify-content: center justify-content: center }
.box6 { width: auto height: auto max-width: 90% max-height: 90% }</style><div class="wrp wrp6">
<div class="box box6">
<h3>完全居中方案六：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div></div>1234567891011121314151617181920212223242526272829303132
效果：
实现原理： flexbox布局。此乃布局终极大法，专治各种布局定位难题！优点：能解决各种排列布局问题，实现方式符合人类认知。缺点：PC端某些旧浏览器支持度不高。
css常用的定位方式有五种：1、static定位(普通流定位) -------------- 默认定位
2、float定位(浮动定位) 例：float:left
有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
如果父元素的宽度太窄，那么其他浮动元素会向下移动，直到有足够的空间（左图所示）；如果浮动元素的高度不同，那么其他浮动元素向下移动时，就有可能会出现卡住的情况（下图所示）
注意：浮动元素的外边缘不会超过父元素的内边缘；浮动元素不会上下浮动；浮动元素不会互相重叠，会像行内块元素一样排列。
如果想要既设置浮动，又使父元素的高度被浮动元素撑开，即清除子元素浮动对父元素带来的高度的影响，有四种方法可以实现：
假设HTML代码部分为：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
</div>
1) 为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
CSS代码部分：
.parent{
//...
height:xxx//某个固定值
}
2) 在父元素内，在浮动元素的下方多写一行代码：<div style="clear:both"></div>------------- 缺点：增加代码冗余
HTML代码部分：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
<div style="clear:both"></div>
</div>
3) 为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
.parent{
// ...
overflow:hidden //某个固定值
}
4) 内容生成 ------------- 最优的方法，推荐
CSS代码部分：
.parent:after{
content:''
display:'block'
clear:both
}
3、relative定位(相对定位) position:relative
相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4、absolute定位(绝对定位) position:absolute
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
5、fixed定位（固定定位）position:fixed
相对于窗口的位置，而且不受其他网页内元素影响，永远处于浏览器窗口的相对位置。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。
在看css选择器优先级顺序前，我们先来简单说说css基本选择器有哪些?1.标记选择器(如：body,div,p,ul,li)2.id选择器(如：id=“name”,id=“name_txt”)3.类选择器(如：id=“name”,id=“name_txt”)4.后代选择器(如：#head .nav ul li 从父集到子孙集的选择器)5.子元素选择器(如：div>p ,带大于号>)6.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。我们来看一下css选择器优先级的算法：每个规则对应一个初始"四位数"：0、0、0、0若是 行内选择符，则加1、0、0、0若是 ID选择符，则加0、1、0、0若是 类选择符/伪类选择符，则分别加0、0、1、0若是 元素选择符，则分别加0、0、0、1算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。看完了上述内容，那我们就来看看css选择器优先级的具体排序。css选择器优先级最高到最低顺序为：1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.子选择器(ul <li)5.后代选择器(li a)6.伪类选择(a:hover,li:nth-child)最后，需要注意的是：!important的优先级是最高的，但出现冲突时则需比较”四位数“优先级相同时，则采用就近原则，选择最后出现的样式继承得来的属性，其优先级最低。
