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;换行显示;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

元素的水平居中的方法

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

7720
来自专栏Android干货

自定义控件详解(七):drawText()

20930
来自专栏偏前端工程师的驿站

CSS3魔法堂:禁止用户改变textarea大小

一、前言                             在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅...

20680
来自专栏偏前端工程师的驿站

CSS布局:水平居中

前言                                 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开...

40580
来自专栏angularejs学习篇

marquee 标签的使用详情

66730
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

22320
来自专栏Android干货

安卓开发小效果--走马灯

285120
来自专栏河湾欢儿的专栏

定位

定位元素位置控制 top/right/bottom/left 定位元素偏移量。

13510
来自专栏云端架构

【云端架构】前端必备常用HTML标签

注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

42060
来自专栏用户画像

导航页下拉菜单

1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

13320

扫码关注云+社区

领取腾讯云代金券