对一个已知大小的元素上下左右居中（已知大小了，直接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常用居中的更多相关文章

  1. css常用居中方式

    一.水平居中 1.内联元素 父级元素加 text-align: center 即可 html <div class="container"> <a>内联元素 ...

  2. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  3. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  4. html+css常用总结

    一,HTML结构: 1,DOCTYPE 2,head: title:网站的标题 meta charset 3,body: 二,HTML标签: 块状元素和内联元素: 常见的块级元素有:div.p.add ...

  5. CSS常用标签-手打抄录-感谢原未知博主-拜谢了

    CSS常用标签   CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...

  6. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  7. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. HTML、CSS常用技巧

    一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...

  9. css常用代码大全

    css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置1.font-size: 字号参数 2.font-style: 字体格 ...

随机推荐

  1. Unity编程标准导引-Unity中的基本概念-2.1界面概览

    Unity中的基本概念 本文我们介绍Unity中的基本概念,包括:场景.游戏对象.组件.预制件.资源等. 2.1.界面概览 打开Unity之后,我们大概可以看到以上画面,以上画面中即显示了我们最常用到 ...

  2. java类初始化，使用构造方法

    public class test { /** * java类的初步学习: *   学会使用和类名相同的两种构造方法,对公共类方法的调用: */ public static void main(Str ...

  3. bootstrap-导航总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于企业选取ERP软件的建议

    笔者以前在广州的一家叫速达软件的公司从事实施维护的工作,该公司是一家专注于ERP软件的公司,主要做进销存与财务的管理软件. 期间也对于各大企业有过一些接触,看到很多公司在购买这款软件之后与这家公司发生 ...

  5. Linux系统（四）负载均衡LVS集群之NAT模式

    序言 提到LVS,就从章文嵩博士开始吧,反正也不知道如何下笔来写这一篇.章大博士,读博时候创建这个lvs软件项目,但是他提倡开源精神,在用户的建议和反馈中,这个花了他两周时间开发的开源软件不断得到改建 ...

  6. [Hadoop] - Protocol Buffer安装

    Hadoop从2.x版本开始,底层的RPC远程调用使用ProtocolBuffer格式来传递数据,所以在编译Hadoop的过程中有可能出现提示缺少Protocol服务的异常信息,类似:'protoc ...

  7. ABP Zero 单部署，单数据库，多租户架构

    首先,我们应该定义多租户系统中的两个条目: 租主(Host):租主是单例的(只有一个租主).租主会对创建和管理租户负责.因此,一个“租主用户”比所有的租户等级更高,并独立于所有租户,同时还能控制他们. ...

  8. Eclipse通过jdbc连接数据库制作简单登陆界面

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  9. setTimeout的妙用2——防止循环超时

    上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用- ...

  10. 使用grunt实现web自动化

    1.grunt作用        实现压缩.编译.单元测试等重复性工作 2.需要安装的软件          第一步:从官网获取nodejs的软件包,直接双击进行安装(windows下) 第二步:打开 ...