文本中心
单行文字： line-height text-align : centerormargin :0 auto
. div1 {
width:500px；
height:25px；
border :5 px固态硬盘# d8d8d 8；
文本对齐3360中心； /*子元素的水平居中*
line-height:25px； /*如果将line-height设置为与高度相同，则位于垂直方向的中央。 /
Overflow :隐藏； /*之后使用overflow :隐藏的设置会防止内容超出容器或发生自动换行，从而导致无法获得垂直居中的效果。 */
}
. span1{
/*
width:100px；
显示： block；
margin :0自动；
*/
/*
这些属性的组合可以提供水平居中对齐的效果，但要启用margin:0 auto，必须满足以下条件
块级元素(display : blockordisplay : table ) ) ) ) ) ) ) ) )。
非浮动元素
非固定或绝对位置的要素
宽度不能为自动
*/
}
已知单行文字宽度较高；
多行文字：显示： tabledisplay : table-cell vertical-align : middle
该方法在IE 6和更高版本中无效，因为IE 6无法正确理解display:table和display:table-cell。
处理多行文字的诀窍是将标记作为一个元素(例如span )进行水平、垂直、中心处理。 这样，水平、垂直、中央处理的方法就适用于此。
. div2{
display :表蜂窝；
width:500px；
height :自动；
padding:0 0.1em；
border :4 px固态硬盘# d8d8d 8；
color:#069；
垂直对准：米； /*CSS属性vertical-align指定行内元素(inline )或表格单元格)元素的垂直对齐方式。 */
}
. span2{
display :在线区块；
width:100%；
height:50%；
font-size:1em；
overflow-y :自动；
}
. div2-1{
显示：表；
width:500px；
height:500px；
padding:0 0.1em；
border :4 px固态硬盘# d8d8d 8；
color:#069；
}
. span2-1{
display :表蜂窝；
font-size:1em；
垂直对准：米；
}
2； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中；
2-1； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中； 我们知道多行文字的宽度和高度垂直居中；
实际上，将字符居中的最简单方法是将填充设置为上下或左右填充值相同。 这是完全填充字符的“外观”的垂直居中对齐。 位置负边距方法
此方法与IE6 - IE7兼容，但为了了解元素的宽度和高度，不支持百分比大小和最小- /最大-属性。
. div5{
position:relative；
height:50%；
width:50%；
border :4 px固态硬盘# d8d8d 8；
}
. span5{
width:50px；
height:50px；
border :4 px固态硬盘# d8d8d 8；
位置： absolute；
top:50%；
left:50%；
margin-top:-25px；
margin-left:-25px
;}
position top margin 负边距定位
position+ transform方法
这种方法原理和负边距方法一样，不过不用确定居中元素的宽高，但也有一些坑， 可能干扰其他 transform 效果，如有其他transform需要合写，不利于解耦。
其次， 使用transform可能导致元素内字体出现模糊，主要是因为使用了transform 3D变换,3D变换会开启GPU加速，GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容，图像清晰度不能保证，元素显示清晰度自然就下降了。(后来用了别的居中方法。。)
.div3{
position:relative;
height:50%;
width:50%;
border:4px solid #d8d8d8;
}
.span3{
width:50px;
height:50px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*
transform:translateY(-50%);
transform:translateX(-50%);
*/
border:4px solid #d8d8d8;
}
transform
绝对居中定位方法
元素的宽高支持百分比 % 属性值和 min-/max- 属性
.div6{
position:relative;
height:100%;
width:100%;
border:4px solid #d8d8d8;
}
.span6{
width:50%;
height:50%;
border:4px solid #d8d8d8;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto auto;
}
position top bottom margin 绝对居中定位
flexbox 布局
子元素为浮动，绝对定位，内联元素，都可以实现居中，但要ie11+才支持，可以用babel来polyfill
.div4{
display:flex;
height:50%;
width:50%;
border:4px solid #d8d8d8;
align-items:center;
justify-content:center;
}
.span4{
width:50px;
height:50px;
border:4px solid #d8d8d8;
}
flex
box布局
.div8{
width:50%;
height:50%;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
border:4px solid #d8d8d8;
}
.span8{
width:50px;
height:50px;
border:4px solid #d8d8d8;
}
display:-webkit-box
:before伪元素方法
该方法是利用vertical-align的基线原理，假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部(基线)就会对齐a的中间位置， 如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了
.div9{
/* position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0; */
width:50%;
height:50%;
text-align:center;
border:4px solid #d8d8d8;
/*background:rgba(0,0,0,.5);*/
}
.div9:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.div9 .span9{
display:inline-block;
vertical-align:middle;
width:50px;
height:50px;
line-height:50px;
border:4px solid #d8d8d8;
}
:before
table-cell + vertical-align居中
这个已经在多行文字例子做了介绍
附录
注1：
CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。常见用法:
... ...
...
注2：若要兼容ie6+的浏览器，可能需要css hack
div#wrap {
display:table;
border:4px solid #d8d8d8;
width:500px;
height:400px;
_position:relative;
overflow:hidden;
text-align:center;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
组和两种居中方案 css hack