方法：定位，外边距，内边距，层级，边框；
一个元素；
两个元素；
三个元素.
<!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. 记一次 .NET 某RFID标签管理系统 CPU 暴涨分析

    一:背景 1. 讲故事 前段时间有位朋友说他的程序 CPU 出现了暴涨现象,由于程序是买来的,所以问题就比较棘手了,那既然找到我,就想办法帮朋友找出来吧,分析下来,问题比较经典,有必要和大家做一下分享 ...

  2. 沙漠世界1.0 c++小游戏

    #include<bits/stdc++.h> #include<time.h> #include<windows.h> #include<stdlib.h& ...

  3. Nuget打包并上传教程

    一.准备 1 . 下载 Download NuGet.exe 2 . windows 系统下设置环境变量 path中 或者 在dos 命令窗口下cd转到 nuget.exe 所在目录,这里为了每次使用 ...

  4. python中文官方文档记录

    随笔记录 python3.10中文官方文档百度网盘链接:https://pan.baidu.com/s/18XBjPzQTrZa5MLeFkT2whw?pwd=1013 提取码:1013 1.pyth ...

  5. Luogu3919 【模板】可持久化数组（主席树）

    主席树模板题,注意空间\((n+m) \log(n)\) #include <iostream> #include <cstdio> #include <cstring& ...

  6. PerfView专题 (第七篇)：如何洞察触发 GC 的 C# 代码？

    一:背景 上一篇我们聊到了如何用 PerfView 洞察 GC 的变化,但总感觉还缺了点什么? 对,就是要跟踪到底是什么代码触发了 GC,这对我们分析由于 GC 导致的 CPU 爆高有非常大的参考价值 ...

  7. 快速掌握 Base 64 | 学 Java 密码系列

    Java 密码系列 - Java 和 JS Base 64 Base 64 不属于密码技术,仅是编码方式.但由于在 Java.JavaScript.区块链等出现的频率较高,故在本系列文章中首先分享 B ...

  8. 内网渗透之vlunstack靶场

    前言:vlunstack靶场是由三台虚拟机构成,一台是有外网ip的windows7系统(nat模式),另外两台是纯内网机器(外网ping不通),分别是域控win2008和内网主机win2003,这里就 ...

  9. Atcoder Beginner Contest 200 E. Minflip Summation（概率数论）

    题面 一个字符串 T T T 是由一个包含 0.1.? 的字符串 S S S 循环连接 K K K 次获得的. 字符串 T T T 中的每个 ? 都可以换成 0 或 1 ,假设 T T T 中一共有 ...

  10. Filter中的FilterChain.doFilter(req,resp)的报错解决

    服务器内部错误:500 Request processing failed; nested exception is java.lang.IllegalStateException: 提交响应后无法调 ...