前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css常用居中

css常用居中

作者头像
windseek
发布2018-05-15 17:39:54
2.2K0
发布2018-05-15 17:39:54
举报
文章被收录于专栏:杨龙飞前端

对一个已知大小的元素上下左右居中(已知大小了,直接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;换行显示;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档