css居中学习笔记

一、水平居中

　　以下面的代码为例：

　　

<body>
	<div class="parent">
		<div class="child">
			hello world !
		</div>
	</div>
</body>

　　方法一：inline-block + text-align

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: antiquewhite;
				text-align: center;
			}
			.child{
				background-color: #000000;
				color: white;
				display: inline-block;
			}
</style>

　　　　评价：优点：兼容性好；缺点：元素居中且元素里面的文字也居中

　　方法二：display：table

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: antiquewhite;
			}
			.child{
				background-color: #000000;
				color: white;
				display: table;
				margin: 0px auto;
			}
</style>

　　　　评价：优点：只需要调用child里面的；缺点：兼容性

　　方法三：通过定位的方法

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				position: relative;
			}
			.child{
				background-color: #000000;
				color: white;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
</style>

　　　　评价：优点：不会对其他元素产生影响；缺点：兼容性

　　方法四：

　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				display: flex;
				justify-content: center;
			}
			.child{
				background-color: #000000;
				color: white;
			}

</style>

　　　　评价：优点：只需要设置parent就可以了；缺点：兼容性

　　方法五：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				display: flex;
			}
			.child{
				background-color: #000000;
				color: white;
				margin: 0px auto;
			}

</style>

　　　　评价：优点：简单易操作；缺点：兼容性

二、垂直居中问题

　　方法一：table-cel + vertical-align

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				height: 200px;
				display: table-cell;
				vertical-align: middle;
			}
			.child{
				background-color: #000000;
				color: white;
			}
</style>

　　　　评价：优点：兼容性好

　　方法二：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				height: 400px;
				position: relative;
			}
			.child{
				background-color: #000000;
				color: white;
				position:absolute;
				top:50%;
				transform: translateY(-50%);
			}

</style>

　　方法三：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				height: 400px;
				display: flex;
				align-items: center;
			}
			.child{
				background-color: #000000;
				color: white;	

			}
</style>

三、水平和垂直都居中

　　方法一：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				width: 500px;
				height: 500px;
				text-align: center;
				display: table-cell;
				vertical-align: middle;
			}
			.child{
				background-color: #000000;
				color: white;
				display: inline-block;
			}
</style>

　　方法二：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				width: 600px;
				height: 600px;
				position: relative;
			}
			.child{
				background-color: #000000;
				color: white;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
</style>

　　方法三：

　　　　

<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.parent{
				background-color: red;
				width: 100%;
				height: 800px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.child{
				background-color: #000000;
				color: white;
			}
</style>

css居中学习笔记的更多相关文章

  1. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  2. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  3. 【干货】Html与CSS入门学习笔记1-3

    从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...

  4. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  5. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  6. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  7. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  8. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  9. CSS简易学习笔记

    学习地址:http://www.w3school.com.cn/css/index.asp cnblog不能把格式复制上来,有格式文字版:https://github.com/songzhenhua/ ...

随机推荐

  1. Unity3D去掉全屏时的屏幕黑边

    给全屏后不在乎拉伸变形仍想让画面占满屏幕的朋友,网上搜了一上午,实在是没有相关的资料,只能自己琢磨了. 使用Canvas Scaler在全屏后Unity虽然会为我们自动拉伸UI,但拉伸后仍然保持我们在 ...

  2. XML 和 List 互转类

    XML 和 List 互转类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  3. MySQL模拟：线上误update的恢复

    作为DBA,细心.沉稳是首要的基本素质.不过总有那么一会心烦意乱或者开发同学出现误操作之类的...这里模拟一个误update操作,然后恢复. 如果开发同学有误操作之后最好先别乱动生产环境,需要记录几个 ...

  4. Scala 深入浅出实战经典 第81讲：Scala中List的构造是的类型约束逆变、协变、下界详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-97讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  5. [CoreOS 转载] CoreOS实践指南（六）：分布式数据存储Etcd（下）

    转载:http://www.csdn.net/article/2015-01-28/2823739/2 摘要:Etcd是CoreOS生态系统中处于连接各个节点通信和支撑集群服务协同运作的核心地位的模块 ...

  6. 多个App间传递数据

    平台:Android两个App:A,B:需求:在A中点击一个按钮后,启动B并把数据从A传递到B: 代码: App A: MainActivity.java中添加: Button btn2 = (But ...

  7. sql读取xml

    DECLARE @ItemMessage XML SET @ItemMessage=cast(N'<?xml version="1.0" encoding="utf ...

  8. python问题：IndentationError:expected an indented block错误解决

    Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的Python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...

  9. 如何在wp8 中调试cocos2dx c++ 代码

    有的时候在win32上运行良好的cocos2dx程序移植到wp8的时候就出了问题,我们想把断点放到c++代码中,需要设置一下VS 2012 右击项目属性 把ui任务 设置为仅限本机 即可.

  10. sap IRfcTable 转成 DataTable

    public DataTable GetDataTableFromRFCTable(IRfcTable myrfcTable) { DataTable loTable = new DataTable( ...