对一个已知大小的元素上下左右居中（已知大小了，直接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. 从C#到TypeScript - Promise

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  2. JavaScript中国象棋程序（6） - 克服水平线效应、检查重复局面

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第6节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  3. 剑指offer编程题Java实现——面试题5从头到尾打印链表

    题目描述* 剑指offer面试题5:从尾到头打印链表 输入一个链表的头结点,从尾到头打印出每个结点的值 解决方案一:首先遍历链表的节点后打印,典型的"后进先出",可以使用栈来实现这 ...

  4. 使用EntityFramework中DbSet.Set(Type entityType)方法碰到的问题

    使用的是EntityFramework, Version=6.0.0.0,项目原本直接使用将EntityFramework的Entity拿到UI使用,后面想使用dto对象将数据库的Entity与前台分 ...

  5. 安装MongoDB x86_64

    1.下载MongoDB 下载mongodb的windows版本,有32位和64位版本,根据系统情况下载,下载地址:http://www.mongodb.org/downloads 2.安装MongoD ...

  6. windows 安装 Scrapy的套路

    我最近在琢磨scrapy爬虫框架,在windows中安装scrapy遇到了不少坑:直接 pip install scrapy 安装不成功的,百度说要安装vc2008+等等,安装这些时间太长,最后找到一 ...

  7. Java日常总结之LinkedList、ArrayList的效率分析

    前言: 在我们平常开发中难免会用到List集合来存储数据,一般都会选择ArrayList和LinkedList,以前只是大致知道ArrayList查询效率高LinkedList插入删除效率高,今天来实 ...

  8. 数字化工厂ERP解决方案

    数字化工厂 数字化工厂建设,在现有基础上提升,实现管理层对订单进度.生产绩效.产能分析.质量管理.产品追溯和存货管理等提供业务分析报告:在控制层有可视化看板.移动客户端实现对生产状态的实时掌控,快速处 ...

  9. rdb map出错rbd sysfs write failed

    创建了一个rbd镜像 $ rbd create --size 4096 docker_test 然后,在Ceph client端将该rbd镜像映射为本地设备时出错. $ rbd map docker_ ...

  10. 基于Selenium2+Java的UI自动化（8）- 显式等待和隐式等待

    一.隐式等待 package com.automation.waits; import java.util.concurrent.TimeUnit; import org.openqa.seleniu ...