• 【HTML-CSS】总结-6种实现元素 上下左右居中 方法--附演示效果

    🦖欢迎观阅本本篇文章，我是Sam9029

    文章目录

    上下左右居中–方法总结手册

    • ⭐附源码以及演示效果⭐
      • 可以偷懒不放图片了，图片太多了
    • 其实我想去取名叫 上下左右居中--方法总结大全 的😁
    • 🐸其实就是水平垂直居中 的方法总结

    这就是一篇页面 上下左右居中–方法总结

    旨在温习，和拓展

    说到这，不妨说出你认为的 上下左右居中的方法有多少种🧐

    （我之前，就会只常见的三种（flex，定位+transform，gird））

    今天我将重新学习 上下左右居中方法

    使用前注意

    注意：每种方法的使用场景问题

    在实现 上下左右（水平垂直）居中时，我们总需要考虑的两个主要对象

    • 🧔父元素和 👦子元素（即被实现-上下左右居中的元素）

    所以我们在使用不同的方法时就必须考虑🧔父元素的某些问题

    对，如下

    • ❗以及父元素是否为块元素（或者行内块元素）
      • 因为行内元素是无法设置宽高的，你就无法实现其子元素上下左右的居中
      • 再说在行内元素身体内再次嵌套元素，也不太符合常规逻辑
    • ❗还有就是父元素的宽高
    • 结论：所以要实现子元素的上下左右居中，其父元素应该为块元素（或者行内块元素），且有宽高

    问题又来了,你想想，既然父元素必有宽高,那我们一定需要知道它的具体数值吗？

    • 这就像，老爸有多少私房钱(父元素宽高的具体数值)？，你想要（上下左右居中）相当于找老爸要零花钱，但你不需要知道老爸到底有多少私房钱（因为老妈也可能不知道）
    • 反过来，你也可以试图弄清楚老爸有多少零花，可能是你问他，可能是他主动告诉你
    • 你不知道或者知道老爸的私房钱数目都没关系，因为你唯一确定的是老爸他很宠你，一定会给你零花钱一样

    所以我们在实现上下左右居中时，就会有两种情况

    1. 已知 宽高 的父元素 的情形下

    2. 未知 宽高 的父元素的情形下

    🐉🐉🐉🐉每种实现方式都会给出使用场景🐉🐉🐉

    此文将介绍6种 实现元素 上下左右居中方法

    1.定位+transform

    <body>

<div class="fa">
  
  <div class="son">div>
div>


<style>
    /* 注意消去默认的margin+padding影响 */
    body,div{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    .fa{
      width:100vw;
      height: 100vh;
      border:5px solid tomato;
      position:relative;
    }
    .son{
      width:100px;
      height: 100px;
      border:5px solid black;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    🐸使用场景：

    • 未知宽高 父元素
    • 已知宽高 父元素

    效果演示：

    上下左右居中–定位+transform-SAM9029-codepen

    实现过程讲解，很详细，推荐：#HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B友笔记）

    2.flex布局实现

    <body>
<div class="fa">
  <div class="son">div>
div>

<style>
  /* 注意消去默认的margin+padding影响 */
body,div{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.fa{
  width:100vw;
  height: 100vh;
  border:5px solid tomato;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
}
.son{
  width:100px;
  height: 100px;
  border:5px solid black;
}
style>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    🐸使用场景：

    • 未知宽高 父元素
    • 已知宽高 父元素

    效果演示：

    上下左右居中–Flex实现–SAM9029-codepen

    实现过程讲解，很详细，推荐：#HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B友笔记）

    3.gird布局实现

    CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

    <body>
<div class="fa">
  <div class="son">div>
div>

<style>
  /* 注意消去默认的margin+padding影响 */
body,div{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.fa{
  width:100vw;
  height: 100vh;
  border:5px solid tomato;
  
  display:grid;
  /*or*/
  /*display:inline-gird;*/
  /*对 没错 仅一句话 即可实现上下左右居中*/
  place-items: center  
}
.son{
  width:100px;
  height: 100px;
  border:5px solid black;
}
style>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    🐸使用场景：

    • 未知宽高 父元素
    • 已知宽高 父元素

    效果演示：

    上下左右居中–Gird实现–SAM9029-codepen

    4.display:table实现

    • ❗关于display:table实现，❗得多讲两句需要注意得地方
    • 此处使用得 dom 结构是三层（div.fa>div.son>img）
      • 注意第三层，即在(son内部)display设置为table-cell 内部的 元素应该是 行内块元素或者行内元素
      • 这不难理解，table 内本身（div.fa此时已相当于一个table元素）就该写内容，内部应该在嵌套元素了
    <body>  
  <div class="fa">
    <div class="son">    
      <img src="./dog.png" alt="">    
  
  
  
    div>
  div>
  
  <style>
    body,div{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    body{
      width:100vw;
      height:100vh;
    }
    .fa{
      width: 80%;
      height: 80%;
      display: table;
      border:5px solid skyblue;
    }
    .son{
      border:10px solid tomato;
      display: table-cell;
      vertical-align: middle;
      text-align: center;/*单元格是行内元素*/
    }
    img,.item{
      display:inline-block;
      width:100px;
      height:100px;
      border:1px solid black;
    }
  style>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    🐸使用场景：

    • 未知宽高 父元素
    • 已知宽高 父元素

    效果演示：

    上下左右居中–display-table实现 sam9029-codepen.io

    5.line-height实现

    • ❗line-height实现，❗也得多讲两句需要注意得地方
      • 这里案例使用的DOM结构是 div.fa > text(直接是内容)
      • 同时 .fa 内部的 元素也应该是 行内块元素或者行内元素
    • 这也不难理解，因为若使用line-height（控制上下居中），那就得使用text-align（控制左右居中）
      • 也这就是关键line-height和text-align设置 仅对元素内的 行内块元素和行内元素生效，对块元素无效
      • 拓展：vertical-align同样仅对元素内的 行内块元素和行内元素生效，
    <body>  
  <div class="fa">

    text
    
    

  div>
  
  <style>
        body,div{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    body{
      width:100vw;
      height:100vh;
    }
    .fa{
      width: 500px;
      height: 500px;
      border:5px solid skyblue;
      
	/*左右居中，text-align设置 仅对元素内的 行内块元素和行内元素生效*/
      text-align:center;
      line-height:500px;
    }
	/* 将son 设置为行内款元素*/
    .son{
      display:inline-block;
      width: 100px;
      height: 100px;
      border:2px solid black;

    }
  style>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    🐸使用场景：

    • 已知宽高 父元素

    效果演示：

    上下左右居中–line-height实现 sam9029-codepen.io

    6.未知名称法（使用纯定位）

    • 拓展-不建议使用
    <body>  
  <div class="fa">
    <div class="son">    
    div>
  div>
  
  <style>
    body,div{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    body{
      width:100vw;
      height:100vh;
    }
    .fa{
      width: 80%;
      height: 80%;
      border:5px solid skyblue;
      position:relative;
    }
    .son{
      width: 100px;
      height: 100px;
      border:2px solid black;
      
      margin:auto;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      
    }
  style>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    演示效果

    上下左右居中–未知名称法（使用纯定位）SAM9029-codepen

    注意事项

    消去默认margin+padding影响
    • 注意所有案例中，都默认消去了margin+padding影响
    /* 注意默认的margin+padding消去影响 */
body,div{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    text-align/line-height/vertical-align 设置 仅对元素内的 行内块元素和行内元素生效

    参考

    🐱‍🐉🐱‍🐉文章若有错误，敬请指正🙏

    🦖欢迎查阅Sam9029 的其他文章

    🐸Sam9029-CSDN主页

    **🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**

    • 1
  • 相关阅读:
    能力提高篇--协调能力【对接】
    一米ip流量池系统
    了解一下RabbitMQ
    tomcat学习：tomcat 目录及配置文件学习，部署多个项目的两种方式
    B端系统从0到1：有几步，其中需求分析要做啥？
    FiRa标准——蓝牙OOB技术规范（一）
    【Rust 易学教程】学前准备：Cargo， 你好
    bpmn+vue 中文文档
    PCIe实用调试工具MindShare Arbor增加试用天数
    1. Pthreads专栏简介
  • 原文地址：https://blog.csdn.net/m0_61486963/article/details/126831672