对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）：
css如下：
.parent{height:100px;100px;background:grey;position:relative;}
.Absolute-Center {
height:50px;
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;200px;background:green;position:relative;}
.absolutecentercontent {
margin:auto;
position:absolute;
100px;
display: table;
height: auto;
background:red;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.test{
height:50px;
50px;
background:white;
}
html如下
<div class="parent">
<div class="absolutecentercontent">
<div class="test"><div>
</div>
</div>
未知高度上下左右居中
css如下：
.parents{height:200px;200px;background:grey;position:relative;}
-
.is-Transformed {
-
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;
100%;
overflow:hidden;
height:0;
}
}
在不确定文字是否一行能显示完时，对文字的上下居中应该是设置padding，行的高度不做设定，自适应，word-break:break-all;换行显示;