方法：定位，外边距，内边距，层级，边框；
一个元素；
两个元素；
三个元素.
<!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. day04 缓冲字符流__异常处理

    缓冲字符流 缓冲字符输入流:java.io.BufferedReader 是一个高级的字符流,特点是块读文本数据,并且可以按行读取字符串. package io; import java.io.*; ...

  2. vivo官网APP全机型UI适配方案

    vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...

  3. Latex查表

  4. Java连接数据库从入门到入土

    Java连接数据库 一.最原始的连接数据库 是没有导入任何数据源的:只导入了一个数据库驱动:mysql-connector-java-8.0.27.jar 首先是编写db.proterties文件 d ...

  5. 前端监控系列1｜ 字节的前端监控SDK是怎样设计的

    作者:彭莉,火山引擎 APM 研发工程师,2020年加入字节,负责前端监控 SDK 的开发维护.平台数据消费的探索和落地. 摘要 字节内部应用环境多样( Web 应用.小程序.Electron 应用. ...

  6. ahooks 是怎么解决用户多次提交问题？

    本文是深入浅出 ahooks 源码系列文章的第四篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本文来探索一下 ahooks 的 useLockFn.并由此讨论一 ...

  7. 使用Docker搭建Nextcloud私有网盘

    一.准备材料 安装环境:linux 工具:docker 软件:MySql.Nextcloud 二.安装Docker 安装Docker:https://www.cnblogs.com/jzcn/p/15 ...

  8. Vue3 组合式 API 中获取 DOM 节点的问题

    模板引用 Vue 提供了许多指令让我们可以直接操作组件的模板.但是在某些情况下,我们仍然需要访问底层 DOM 元素.在模板中添加一个特殊的属性ref就可以得到该元素. 访问模板引用 <scrip ...

  9. 【Django】DRF开发中的一些技巧记录

    问题记录 问题1:信号没有按预期触发 描述 编写了信号函数后,并没有如预期一般在必要时候触发,函数如下: @receiver(signals.post_save, sender=Prometheus) ...

  10. 【三维地图】开发攻略 —— 详解“GeoJSON”技术和应用场景

    GeoJSON ,一个用于存储地理信息的数据格式.GoeJSON对象可以表示几何.特征或特征集合,支持:点.线.面.多点.多线.多面和几何集合.在基于平面地图,三维地图中都需要用到的一种数据类型. 由 ...