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;换行显示;
腾讯云开发者
