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. Android Studio导入github下载的工程

    现在从github上面现在的项目大部分都是Android Studio工程,那么问题来了,从github上面down一个工程下来,怎么导入android studio呢? 对刚从eclipse转And ...

  2. Oracle 12c 安装手册

    Oracle 12C 首次安装 期待已久的Oracle 12C 终于发布了,我迫不及待的下载了介质,一睹风采. 下载地址:http://www.oracle.com/technetwork/datab ...

  3. 2014 Hangjs 见闻流水账第一天

    前言 6月21日~6月22日, 第一次跑远门去参加一个大会(广州 -> 杭州),本来打算,在火车的回来的路上,把这两天的东西记录一下,不过,火车上的环境实在恶劣,同时也高估了自己的专注力,所以, ...

  4. C#数据库绑定

    .Net对数据库的绑定 using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  5. [转] Autofac创建实例的方法总结

    1.InstancePerDependency 对每一个依赖或每一次调用创建一个新的唯一的实例.这也是默认的创建实例的方式. 官方文档解释:Configure the component so tha ...

  6. Java 模板引擎 jetbrick-template

    jetbrick-template 是一个新一代 Java 模板引擎,具有高性能和高扩展性. 适合于动态 HTML 页面输出或者代码生成,可替代 JSP 页面或者 Velocity 等模板. 指令和 ...

  7. DataTable添加行和列数据

    protected void Page_Load() { DataTable newdtb = new DataTable(); newdtb.Columns.Add("Id", ...

  8. Mysql数据备份与恢复

    REM INIT→既に指定したファイルが有った場合, 上書きする REM NORECOVERY→接続先データベースへの既存の接続を閉じる REM REPLACE→既存のデータベースを上書きする set ...

  9. AchartEngine绘图引擎

    https://code.google.com/p/achartengine/  Code Test代码: /workspace/AChartEngineTest   /workspace/appco ...

  10. IE11 Enterprise Mode

    对IE11引入的Enterprise Mode进行了一些总结,对查阅的一些参考资料直接引用了英文,需要注意的地方用中文进行了一些注解.供大家参考. 1. The purpose of introduc ...