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. jquery实现返回基部案例效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  2. Java 字符的验证

    package net.hlj.common.util; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @ ...

  3. Flask-Babel 中文支持（zh-CN和zh-Hans-CN）

    命名的翻译文件夹必须命名为zh_Hans-CN,其他的都是不标准的命名!

  4. ImageEdit 展示图片(XAML, C#)

    <dxe:ImageEdit Source="/Gemr;component/Images/FakeUI/MedicalRecordFake.jpg" Stretch=&qu ...

  5. crontab使用方法和示例

    crond是linux中的一个定时任务常驻程序,它会在每分钟检查一次作业列表,从而达到在指定时间自动运行指定的作业,这个程序对于系统运维来讲必不可少. 通常我们使用crontab程序来设定和管理作业的 ...

  6. 1.C#中几个简单的内置Attribute

    阅读目录 一:Obsolete 二:Conditional 一:Obsolete      这个内置属性是说这个方法废弃了不可用,它有两个参数,第一个参数message是说废弃的原因,第二个参数err ...

  7. Oracle 行转列总结 Case When,Decode,PIVOT 三种方式 - 转

    最近又碰到行专列问题了,当时不假思索用的是子查询,做完后我询问面试管行专列标正的写法应该如何写,他告诉我说应该用"Decode",索性我就总结一下,一共三种方式 --======= ...

  8. jQuery easyui 之 expend row

    http://www.jeasyui.com/tutorial/datagrid/datagrid21.php

  9. WCF关于svcutil生成关于绑定出现 元数据包含无法解析的引用的解决方案

    元数据包含无法解析的引用. 没有终结点在侦听可以接受消息的 net.tcp://localhost:8000/service.这通常是由于不正确的地址或者 SOAP 操作导致的.如果存在此情况,请参阅 ...

  10. aliyun ubuntu mysql

    http://www.codingyun.com/article/38.html ------------ python install mysql module ubuntu下mysql-pytho ...