水平居中—行内元素

如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center;

水平居中—定宽块元素

div{
width:100px;
margin:0 auto;
}

水平居中—不定宽块元素1

步骤:

  1. 添加table元素
  2. table的左右margin设置为auto
<table>
<tbody>
<tr>
<td><div class="wrap">
设置我所在的div容器水平居中
</div></td>
</tr>
</tbody>
</table>
table{margin: 0 auto;}
.wrap{background: #333;color: #fff;}

水平居中—不定宽块元素2

步骤:

  1. 设置该块元素为display:inline;
  2. 设置该元素的父元素text-align:center;

水平居中—不定宽块元素3

步骤:

  1. 设置父级元素样式为float:left;position:relative;left:50%;
  2. 设置该元素样式为position:relative;left:-50%;

垂直居中—父元素高度确定的单行文本

设置父元素的 heightline-height一致即可

垂直居中—父元素高度确定的多行文本1

针对父元素高度确定的多行文本、图片、块状元素的竖直居中

步骤:

  1. 父元素外加table
  2. 子元素设置vertical-align="middle"【只对td、th有效,且默认为middle,所以不写也可】

垂直居中—父元素高度确定的多行文本2

针对父元素高度确定的多行文本、图片、块状元素的竖直居中

设置父元素的 displaytable-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

CSS常用布局学习笔记的更多相关文章

  1. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  2. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  3. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  4. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. 从今天开始 每天记录HTML,CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  6. mongodb常用命令学习笔记

    mongodb常用命令学习笔记 创建数据库 use DATABASE_NAME eg: use users; 如果数据库不存在,则创建数据库,否则切换到指定数据库.要显示刚刚创建的数据库,需要向数据库 ...

  7. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  8. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

随机推荐

  1. PHP代码获取客户端IP地址经纬度及所在城市

    echo $_SERVER['HTTP_HOST'];//echo $_SERVER['REQUEST_URI'];$getIp=$_SERVER["REMOTE_ADDR"];e ...

  2. JAVA基础学习——1.0 Java概述

    Java语言 SUN公司  1995年推出的高级编程语言 ■  主要应用方向 Web开发和Android开发 ■  主要特点 平台无关性:能运行于不同的平台上    安全性:去掉了指针操作,内存由操作 ...

  3. ASP.NET中的chart控件绑定SQL Server数据库

    网上很多的chart控件的实例都没有绑定数据库,经过一番摸索后,终于实现了chart控件绑定数据库. 首先,在Visual Studio中建立一个网站,新建一个WebForm项目,名称为ChartTe ...

  4. _NSInlineData objectForKeyedSubscript:

    最近总是遇到这个错误:reason: '-[_NSInlineData objectForKeyedSubscript:]: unrecognized selector sent to instanc ...

  5. MFC 静态文本的自绘 空心字的实现

    想在对话框里,显示几个字是很简单的,只要用静态文本的输出就可以了.然而有时候我们需要显示特效的字,我们希望显示的文字就像Word里的艺术字一样,看起来美观.这时我们可以重写CStatic类.用Draw ...

  6. myeclipse maven 安装

    myeclipse 上安装 Maven3   环境准备: JDK 1.6.45 Maven 3.0.5 myeclipse 8.5 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Ma ...

  7. addEventListener详解

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...

  8. 【Java EE 学习 78 下】【数据采集系统第十天】【数据采集系统完成】

    一.项目源代码地址 二.项目演示

  9. 重置VS设置

    用VS开发项目的时候, 偶发智能提示消失.关键字.类名不变色的情况. 如果你也遇到过,那么这样做: 新建txt,打开并输入以下内容: start "" "C:\Progr ...

  10. RSA密钥之C#格式与Java格式转换

    前言 最近由于项目需求,服务端由c#编写,客户端由java编写.通信数据使用RSA非对称加密.但是java和c#生成的密钥格式是不一样的,所以需要转换格式才可以正常使用.网上搜到使用java进行格式转 ...