方法：定位，外边距，内边距，层级，边框；
一个元素；
两个元素；
三个元素.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="father1">
    <div class="son1"></div>
  </div>

方法1

  <div class="father2">
    <div class="son2"></div>
  </div>

方法2

  <div class="father3">
    <div class="son3"></div>
  </div>

方法3

  <div class="father4">
    <div class="son4"></div>
  </div>

方法4

  <div class="father5">
    <div class="son5"></div>
  </div>
  <!-- 前五种为两个元素的居中方式 -->

方法5

  <div class="six"></div>

方法6

  <div class="seven"></div>
  <!-- 后两种为1个元素的居中方式 -->

方法7

  <div class="father8">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
  </div>
  <!-- 最后一种为3个元素的居中方式 -->
方法8
</body>
</html>
 
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
清除浏览器默认样式
.father1 {
  width: 400px;
  height: 400px;
  background-color: #fc4;
  position: relative;
}
.son1 {
  width: 200px;
  height: 200px;
  background-color: #f44;
  position: absolute;
  top: 100px;
  left: 100px;
}
/* 第一种居中方式 */
定位
.father2 {
  width: 200px;
  height: 200px;
  background-color: #f77;
  position: relative;
}
.son2 {
  width: 100px;
  height: 100px;
  background-color: #ff7;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
/* 第二种居中方式 */
定位+外边距+百分比
.father3 {
  width: 200px;
  height: 200px;
  background-color: #0f0;
  position: relative;
  /* overflow: hidden; */
  /* 解决margin塌陷问题 */
}
.son3 {
  width: 100px;
  height: 100px;
  background-color: #77f;
  position: absolute;
  margin-left: 50px;
  margin-top: 50px;
}
/* 第三种居中方式 */
定位+外边距
.father4 {
  width: 100px;
  height: 100px;
  padding: 50px;
  background-color: #f44;
}
.son4 {
  width: 100px;
  height: 100px;
  background-color: #0f7;
}
/* 第四种居中方式 */
内边距
.father5 {
  width: 100px;
  height: 100px;
  border: 50px solid #f444;
  background-color: #f444;
}
.son5 {
  width: 100px;
  height: 100px;
  background-color: #4fff;
}
/* 第五种居中方式 */
边框
.six {
  width: 200px;
  height: 200px;
  background-color: #f9f67f;
  border: 100px solid #08c;
}
/* 第六种居中方式 */
一个元素 边框
.seven {
  width: 0px;
  height: 0px;
  padding: 100px;
  background-color: #f78;
  border: 50px solid #99f4;
}
/* 第七种居中方式 */
一个元素 边框+内边距
.box1 {
  width: 200px;
  height: 200px;
  background-color: #f075;
  position: absolute;
  z-index: 1;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: #ff99;
  position: absolute;
  z-index: 2;
  top: 50px;
  left: 50px;
}
.father8 {
  position: relative;
}
/* 第八种居中方式 */
3个元素 定位+层级

HTML&CSS-盒模型运用居中方式合集的更多相关文章

  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  2. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  3. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  4. 4、css盒模型和文本溢出

    4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...

  5. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  6. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  7. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  8. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  9. 重温基础之-css盒模型

    所有html元素都可以看作盒子. css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距,边框,内边距和实际内容. 默认情况下,一个元素的总宽度计算方式: 总宽度=左外边距+左边框+左内 ...

随机推荐

  1. Solution -「营业」「CF567D」One-Dimensional Battle Ships

    题目大意 - 翻译   Alice 和 Bob喜欢在 \(1\times n\) 的表格中玩战舰游戏.游戏开始时,Alice 有 \(k\) 艘战舰,每艘战舰长度为 \(a\),她需要把这些战舰不重叠 ...

  2. nginx的高级用法

    一.根据url中的参数来确定缓存的key set_by_lua_block $dataArg { local enc = ngx.req.get_uri_args()["enc"] ...

  3. Clang-format-12安装

    ubu18 clang-format安装 1.更新源 wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add - ...

  4. 【Java线程池】 java.util.concurrent.ThreadPoolExecutor 分析

    线程池概述 线程池,是指管理一组同构工作线程的资源池. 线程池在工作队列(Work Queue)中保存了所有等待执行的任务.工作者线程(Work Thread)会从工作队列中获取一个任务并执行,然后返 ...

  5. Java学习 (八)基础篇 运算符

    目录 运算符 基本运算符 1.一元基础运算(重点) 一元运算符 (a++ / ++a) (a-- / --a) 2.二元基础运算 基础 计算返回值类型 关系运算 幂运算 3.三元运算符 4.逻辑运算符 ...

  6. 从-99打造Sentinel高可用集群限流中间件

    接上篇Sentinel集群限流探索,上次简单提到了集群限流的原理,然后用官方给的 demo 简单修改了一下,可以正常运行生效. 这一次需要更进一步,基于 Sentinel 实现内嵌式集群限流的高可用方 ...

  7. DevOps落地实践点滴和踩坑记录-(2) -聊聊平台建设

    很久没有写文章记录了,上一篇文章像流水账一样,把所见所闻一个个记录下来.这次专门聊聊DevOps平台的建设吧,有些新的体会和思考,希望给正在做这个事情的同学们一些启发吧. DevOps落地实践点滴和踩 ...

  8. package.json 与 package-lock.json 的关系

    模块化开发在前端越来越流行,使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块.package.json 用来描述项目及项目所依赖的模块信息. 那 package-lock.json  ...

  9. KingbaseES行转列（PIVOT）

    如果以交叉表格式显示,则商业智能查询返回的数据通常是最有用的.SELECT语句的pivot_.数据透视是数据仓库中的一项关键技术.在其中,您可以将多行输入转换为数据仓库中较少且通常较宽的行.进行数据透 ...

  10. LIKE与等式查询比较

    我们知道 char 是定长类型的数据,如果数据长度小于定义的长度,会在字符串尾部加上空格.而对于空格的处理,对于等式匹配,或length等,会忽略空格.而对于like 或模式匹配,空格不能忽略. 一. ...