css常用居中

对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）：

css如下：
.parent{height:100px;width:100px;background:grey;position:relative;}
.Absolute-Center {
height:50px;
width:50px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
html如下：
<div class="parent">
<div class="Absolute-Center">
</div>
</div>

未知高度上下左右居中

css如下：
.parent{height:200px;width:200px;background:green;position:relative;}
.absolutecentercontent { 
margin:auto;
position:absolute; 
width:100px;
display: table; 
height: auto; 
background:red;
top:0px;
left:0px;
right:0px;
bottom:0px;
} 
.test{
height:50px;
width:50px;
background:white;
}
html如下
<div class="parent">
<div class="absolutecentercontent">
<div class="test"><div>
</div>
</div>

未知高度上下左右居中

css如下：

.parents{height:200px;width:200px;background:grey;position:relative;}

• .is-Transformed {

• width: 50%;

• margin: auto;

• position: absolute;

• top: 50%; left: 50%;

• -webkit-transform: translate(-50%,-50%);

• -ms-transform: translate(-50%,-50%);

• transform: translate(-50%,-50%);

• background:red;

• }

• html如下:

<body>
<div class="parents">
<div class="is-Transformed">
1212
</div>
</div>
</body>

css文字居中:

.scatter{

display:block;

text-align: justify;

text-justify:distribute-all-lines;/*ie6-8*/

text-align-last:justify;/* ie9*/

-moz-text-align-last:justify;/*ff*/

-webkit-text-align-last:justify;/*chrome 20+*/

}

@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/

.scatter:after{

content:".";

display: inline-block;

width:100%;

overflow:hidden;

height:0;

}

}

在不确定文字是否一行能显示完时，对文字的上下居中应该是设置padding，行的高度不做设定，自适应，word-break:break-all;换行显示;