方法：定位，外边距，内边距，层级，边框；
一个元素；
两个元素；
三个元素.
<!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 -「SDOI2011」拦截导弹

    Sol.   题目要求一个数对序列的二维最长下降子序列,我们称其为 Q.并求出每一个元素分别在可能的 Q 中出现了多少次.   直接 Dp,时间复杂度 \(O(n^2)\) 不行.考虑 CDQ 分治 ...

  2. Python 封装SNMP调用接口

    PySNMP 是一个纯粹用Python实现的SNMP,用PySNMP的最抽象的API为One-line Applications,其中有两类API:同步的和非同步的,都在模块pysnmp.entity ...

  3. C#通过完整的例子，Get常用的2个套路，理解抽象方法，虚方法，接口，事件

    一.理解:抽象方法,虚方法,接口,事件 描述: 1.定义一个抽象父类"People": 要求: 1>3个属性:名字,性别,年龄: 2>一个普通方法"说话&qu ...

  4. Bert不完全手册6. Bert在中文领域的尝试 Bert-WWM & MacBert & ChineseBert

    一章我们来聊聊在中文领域都有哪些预训练模型的改良方案.Bert-WWM,MacBert,ChineseBert主要从3个方向在预训练中补充中文文本的信息:词粒度信息,中文笔画信息,拼音信息.与其说是推 ...

  5. netdata检测工具的安装与使用

    Netdata 是一款 Linux 性能实时监测工具..以web的可视化方式展示系统及应用程序的实时运行状态(包括cpu.内存.硬盘输入/输出.网络等linux性能的数据). Netdata文档地址: ...

  6. Win10系统下搭建Go lang开发环境更换国内源并且体验宇宙最快框架Iris

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_156 最近有同学开始尝试接触Go lang,拥抱新技术永远都会是一个好习惯,之前的一篇文章介绍了如何在Mac os系统下配置Go ...

  7. 还在用Alpine作为你Docker的Python开发基础镜像？其实Ubuntu更好一点

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_173 一般情况下,当你想为你的Python开发环境选择一个基础镜像时,大多数人都会选择Alpine,为什么?因为它太小了,仅仅只有 ...

  8. 点击>>>解锁Apache Hadoop Meetup 2021！

    " 10月16日,属于开源发烧友的狂欢日来啦! Apache Hadoop Meetup 2021 开源大数据行业交流盛会盛大开启!让我们相约北京,一起嗨翻初秋~ 在当今信息化时代,逐渐成熟 ...

  9. Nginx 代理Vue项目出现Invalid Host header

    说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 ...

  10. HCIA-Datacom 2.2 实验：OSPF路由协议基础实验

    前言:才发现IA也要学OSPF,忍不住吐槽一句,现在太卷了! OSPF简介: 开放式最短路径优先OSPF(Open Shortest Path First)是IETF组织开发的一个基于链路状态的内部网 ...