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. IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)

    继续说说ios不同版本之间的适配 先说一个东西:在xcode当中有一个东西叫targets,苹果的官方文档是这样说的: A target specifies a product to build an ...

  2. [转] jQuery对象与DOM对象之间的转换

    http://wozailongyou.iteye.com/blog/299311 http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdo ...

  3. MiniCrowler

    MiniCrawler Github Path : https://github.com/LixinZhang/miniCrowler Introduction: MiniCrawler is a s ...

  4. Spring3系列11- Spring AOP——自动创建Proxy

    Spring3系列11- Spring AOP——自动创建Proxy 在<Spring3系列9- Spring AOP——Advice>和<Spring3系列10- Spring A ...

  5. Android Weak Handler：可以避免内存泄漏的Handler库

    这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! android使用java作 ...

  6. windows 程序设计自学:添加图标资源

    #include <windows.h> #include "resource.h" LRESULT CALLBACK MyWndProc( HWND hwnd, // ...

  7. Windows下启动各服务命令

    1. gpedit.msc-----组策略 2. nslookup-------IP地址侦测器 3. explorer-------打开资源管理器 4. logoff---------注销命令 5. ...

  8. [Z]CS权威会议

    CS Conference TOP 40 计算机会议TOP40 一.A 类 15 个 ASPLOS: Architecture Support for Programming Languages an ...

  9. XCActionBar 「Xcode 中的 Alfred」

    下载地址:https://github.com/pdcgomes/XCActionBar 基本命令: (1)「command+shift+8」或者双击「command」键可以打开「动作输入框窗口」 ( ...

  10. ubuntu14.04 LTS 更新源

    官方源: deb http://archive.ubuntu.com/ubuntu/ trusty main restricted universe multiverse deb http://arc ...