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 条评论
登录 后参与评论

相关文章

来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

3145
来自专栏云端架构

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

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

4076
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

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

定位

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

1141
来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

36212
来自专栏编程直播室

Canvas的HelloWorld文本的样式文本的测量总结

2586
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

2285
来自专栏Android干货

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

27012
来自专栏Android小菜鸡

HTML JS DOM

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

1472
来自专栏desperate633

浅谈JavaScript如何操作html DOMJavaScript 能够改变页面中的所有 HTML 元素改变 HTML 样式** JavaScript 有能力对 HTML 事件做出反应**添加和删除

** 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。**

881

扫码关注云+社区