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;换行显示;
最新文章
- 佛洛依德 c++ 最短路径算法
- winform 开发心得~
- Linq to 泛型集合查询集合包括大写M和年龄小于等于18
- hello
- 一条sql语句循环插入N条不同记录(转)
- silverlight visifire控件图表制作——silverlight 静态页面xaml
- 《web全栈工程师的自我修养》阅读笔记
- CentOS下MySQL的安装
- [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.3 一维反应流体力学方程组的数学结构
- 列式数据库~clickhouse 场景以及安装
- matchesSelector()方法
- Effective MySQL之SQL语句最优化——读书笔记之一
- Nginx 日志分析命令
- linux下kerberos教程
- 记github上搭建独立域名的免费博客的方法过程
- 使用array_merge重新排列数组下标
- GMTcolor
- 二叉查找树ADT--C语言描述
- iostbleView刷新后显示指定cell
- MTU&MSS