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;换行显示;
css常用居中的更多相关文章
- css常用居中方式
一.水平居中 1.内联元素 父级元素加 text-align: center 即可 html <div class="container"> <a>内联元素 ...
- CSS常用选择器名
一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- html+css常用总结
一,HTML结构: 1,DOCTYPE 2,head: title:网站的标题 meta charset 3,body: 二,HTML标签: 块状元素和内联元素: 常见的块级元素有:div.p.add ...
- CSS常用标签-手打抄录-感谢原未知博主-拜谢了
CSS常用标签 CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- HTML、CSS常用技巧
一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...
- css常用代码大全
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置1.font-size: 字号参数 2.font-style: 字体格 ...
随机推荐
- tomcat启动异常、和web.xml缺少配置异常
错误如下: 14-Feb-2017 10:50:00.665 SEVERE [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.Sta ...
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
2017-01-06 Tomson JavaScript 转自 https://segmentfault.com/a/1190000003818163 闭包 1.正确的说,应该是指一个闭包域,每当声明 ...
- PHP文件上传处理
web中,文件上传是一个很常用的功能.如:上传头像.上传图片.这些提交到后台的图片都要交给后端处理.php提供了几个上传处理的函数,我把它们封装成类,以便日后使用. 处理流程(可能有不合理的地方,用时 ...
- PPT中翻书动画的制作
一.新建一个空白的PowerPoint文档. 二.制作两个页面: 1．点击“自选图形”右边的小三角,选择“基本图形”下的“折角形”图形,在PowerPoint中画出一个书页样的图形,宽度最好小 ...
- 利用AForge.NET 调用电脑摄像头进行拍照
当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...
- Linux:- comm命令的妙用
参数://假设a集.b集.ab交集 # comm [options] textA textB options: 1.表示a集除去ab交集重叠那部分: 2.表示b集除去ab交集重叠那部分: 3.表示ab ...
- 关于Monkey的一切都在这里
关于Monkey的一切都在这里 版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 允许有条件转载,转载请附带底部二维码. 一.什么是Monkey Monkey是 ...
- 详解JavaScript闭包
要想完全明白JavaScript的闭包,要先明白js中的一些基础原理,然后我再给出一些例子来讲解闭包. 在执行JavaScript时会创建一个执行环境(excution context),执行环境定义 ...
- css :target
花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到, ...
- Android HelloChart Demo
这几天,要做一个图标的统计,自己去网上查了下,现在用的比较多的有三种,AChartEngine 是Google的一个开源图表库 这种我最开始就去导demo去了解他,不过里面是是英文,不好研究.我就放弃 ...