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. C# 修改webbrowser 的 useragent

    Also, there is a refresh option in the function (according to MSDN). It worked well for me (you shou ...

  2. Asp.net MVC应用在IIS7上部署后403错误解决方案

    1.检查服务器上是否安装了“HTTP重定向”功能和“静态内容压缩”功能(在添加/删除程序或增加角色处安装) 2.应用程序池要被配置为“集成” 3.如果IIS在.Net Framework之后安装的,需 ...

  3. [LeetCode] Longest Increasing Subsequence

    Longest Increasing Subsequence Given an unsorted array of integers, find the length of longest incre ...

  4. SQL SERVER2012中使用游标来备份数据库

    在SQL SERVER中,添加JOB,可以使用以下语句设置定期备份数据库. DECLARE @name VARCHAR(50)--databasename DECLARE @path VARCHAR( ...

  5. Openvswitch原理与代码分析(2): ovs-vswitchd的启动

    ovs-vswitchd.c的main函数最终会进入一个while循环,在这个无限循环中,里面最重要的两个函数是bridge_run()和netdev_run().     Openvswitch主要 ...

  6. c++中的##和#的区别

    ##是一个连接符号,用于把参数连在一起 #是“字符串化”的意思.出现在宏定义中的#是把跟在后面的参数转换成一个字符串 #define paster( n ) printf( "token & ...

  7. Spark 实时计算整合案例

    1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...

  8. 如何查看 exec sp_execute 10 XXX, XXXX的RPC事件 内容

    使用事件探查器经常能捕捉到类似于exec sp_execute 10 XXX, XXXX的RPC事件. 我想问下从哪里可以看到存储过程sp_execute 10的内容呢?? 方法如下: 在新建的pro ...

  9. JAVA笔记 之 Thread线程

    线程是一个程序的多个执行路径,执行调度的单位,依托于进程存在. 线程不仅可以共享进程的内存,而且还拥有一个属于自己的内存空间,这段内存空间也叫做线程栈,是在建立线程时由系统分配的,主要用来保存线程内部 ...

  10. JavaScript封装Ajax（类JQuery中$.ajax()方法）

    ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...