当前位置： 首页 > news >正文

Html css水平居中+垂直居中+水平垂直居中的方法总结

news 来源：原创 2024/9/21 5:45:18

1. Html css水平居中+垂直居中+水平垂直居中的方法总结

1.1. Html 元素

1.1.1.元素宽高特点

（1）块级元素（如div）：独占一行，不和其他元素在一起，可以设置宽和高；当没设置宽和高时，宽度和父级宽度一样，高度由内容的高度决定；当设置宽和高时，元素的宽高就是设置值，当内容超过宽高值时，元素宽高值也不变高，会溢出。
（2）行级元素（如span）：不会独占一行，和其它元素在一起，不可以设置宽和高，由里面的内容决定；设置的宽高无效。
（3）行内块级元素（如img）：不会独占一行，可以和其它元素在一起，可以设置宽和高；当没设置宽和高时，宽高有元素内容决定；当设置宽和高时，元素内容宽高为设置值。
元素宽高特点

1.1.2. 元素类型转换

（1）块级元素
常用的有div,所有布局元素，h1-h6，p，ul，li…
（2）行级元素
常用的有a，span，strong，b，i，sub，sup…
（3）行间块级元素
常用的有img，input，video，audio…
（4）嵌套关系：块级元素可以嵌套块级元素、行级元素、行内块级元素；行级元素不可以嵌套块级元素，如需嵌套，需要把行级元素转化成块级元素再嵌套（使用css）；行内块级元素可以嵌套行级元素，不能嵌套块级元素。
（5）注意：h1-h6，p不能嵌套块级元素。
（6）行级、行内块级元素转块级元素，任何元素都可以进行类型转换

display: block;

（7）行级转块级代码

<head><meta charset="UTF-8"><title>CSS简介</title><style type="text/css">a {background: red;display: block;width: 200px;height: 80px;</style></head><body><a href="">我要自学网</a></body>

（8）块级元素转行级元素，任何元素都可以进行类型转换

display: inline;

（9）块级元素转行内块级级元素，任何元素都可以进行类型转换

display: inline-block;

（10）块级元素转行级元素代码

<head><meta charset="UTF-8"><title>CSS简介</title><style type="text/css">div {background: red;display: inline;width: 200px;height: 80px;</style></head><body><div>我要自学网</div><span>我要自学网</span></body>

1.2. 水平居中

1.2.1. 行级元素

（1）首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

<style>#father {width: 500px;height: 300px;background-color: skyblue;text-align: center;}
</style>
<div id="father"><span id="son">我是行内元素</span>
</div>

（2）如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

<style>#father {display: block;width: 500px;height: 300px;background-color: skyblue;text-align: center;}
</style>
<span id="father"><span id="son">我是行内元素</span>
</span>

（3）效果
在这里插入图片描述

1.2.2. 块级元素

1.2.2.1. 方案一(分宽度定不定两种情况)

（1）定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

<style>#father {width: 500px;height: 300px;background-color: skyblue;}#son {width: 100px;height: 100px;background-color: green;margin: 0 auto;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

效果：
在这里插入图片描述

（2）不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 **display: inline;**即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

	<style>#father {width: 500px;height: 300px;background-color: skyblue;text-align: center;}#son {background-color: green;display: inline;}</style><div id="father"><div id="son">我是块级元素</div></div>

  效果：（将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用）
在这里插入图片描述

1.2.2.2. 方案二(使用定位属性)

  首先设置父元素为相对定位，再设置子元素为绝对定位，子元素设置为left:50%或设置为transform: translateX(-50%);使子元素的左上角水平居中；
（1）定宽度：设置绝对子元素的margin-left: -元素宽度的一半px;或者设置transform: translateX(-50%);

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {width: 100px;height: 100px;background-color: green;position: absolute;left: 50%;margin-left: -50px;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

（2）不定宽度：利用css3新增属性transform: translateX(-50%);

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {height: 100px;background-color: green;position: absolute;left: 50%;transform: translateX(-50%);}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.2.2.3. 方案三：使用flexbox布局实现

  使用flexbox布局（宽度定不定都可以），只需要给待处理的块状元素的父元素添加属性display: flex; justify-content: center;

<style>#father {width: 500px;height: 300px;background-color: skyblue;display: flex;justify-content: center;}#son {width: 100px;height: 100px;background-color: green;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.3. 垂直居中

1.3.1. 行内元素

1.3.1.1. 单行的行内元素

（1）只需要设置单行行内元素的"行高等于盒子的高" line-height: 300px;即可；

<style>#father {width: 500px;height: 300px;background-color: skyblue;}#son {background-color: green;line-height: 300px;}
</style>
<div id="father"><span id="son">我是单行的行内元素</span>
</div>

  效果：
在这里插入图片描述

1.3.1.2. 多行的行内元素

  使用给父元素设置**display:table-cell;和vertical-align: middle;**属即可；

 <style>#father {width: 500px;height: 300px;background-color: skyblue;display: table-cell;vertical-align: middle;}#son {background-color: green;}
</style><div id="father"><span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

  效果：
在这里插入图片描述

1.3.2. 块级元素

1.3.1.1. 方案一：使用定位

  首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；
（1）定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {height: 100px;background-color: green;position: absolute;top: 50%;margin-top: -50px;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

（2）不定高度：利用css3新增属性transform: translateY(-50%);

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {width: 100px;background-color: green;position: absolute;top: 50%;transform: translateY(-50%);}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.3.1.2. 方案二：使用flexbox布局实现

  使用flexbox布局（高度定不定都可以），只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>#father {width: 500px;height: 300px;background-color: skyblue;display: flex;align-items: center;}#son {width: 100px;height: 100px;background-color: green;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.3.1.3. 其他方式

  display的table和table-cell一般情况下用的不多，但关于让块级元素的多行文字垂直居中，行级元素单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。这里介绍display：table和table-cell是如何让多行文字垂直居中。

<style>#father {width: 500px;height: 300px;background-color: skyblue;display: table;}#son {display: table-cell;vertical-align: middle;background-color: green;}
</style>
<div id="father"><div id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</div>
</div>;

  效果：
在这里插入图片描述

  只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中。

1.4. 水平垂直居中

1.4.1. 已知高度和宽度的元素

1.4.1.1. 方案一：设置父元素相对定位、子元素绝对定位

  设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {width: 100px;height: 100px;background-color: green;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.4.1.2. 方案二：设置父元素为相对定位，给子元素设置绝对定位，

  设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {width: 100px;height: 100px;background-color: green;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.4.2. 未知高度和宽度的元素

1.4.2.1. 方案一：使用定位属性

  设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);或transform: translate(-50%, -50%);

<style>#father {width: 500px;height: 300px;background-color: skyblue;position: relative;}#son {background-color: green;position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.4.2.2. 方案二：使用flex布局实现

  设置父元素为flex定位，justify-content: center; align-items: center;

<style>#father {width: 500px;height: 300px;background-color: skyblue;display: flex;justify-content: center;align-items: center;}#son {background-color: green;}
</style>
<div id="father"><div id="son">我是块级元素</div>
</div>

  效果：
在这里插入图片描述

1.5. CSS display:flex 属性

1.5.1. display:flex 布局

  display:flex 是一种布局方式。它既可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.5.2. flex的六个属性

1.5.2.1. flex-direction

  容器内元素的排列方向(默认横向排列)
（1）flex-direction:row; 沿水平主轴让元素从左向右排列。
在这里插入图片描述

（2）flex-direction:column; 让元素沿垂直主轴从上到下垂直排列。
在这里插入图片描述

（3）flex-direction:row-reverse;沿水平主轴让元素从右向左排列
在这里插入图片描述

1.5.2.2. flex-wrap

  容器内元素的换行(默认不换行)
（1）flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%设置此属性，2个div宽度就自动变成各50%；
（2）flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

1.5.2.3. justify-content

  元素在主轴（页面）上的排列
（1）justify-content : center;元素在主轴（页面）上居中排列。
在这里插入图片描述

（2）justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列。
在这里插入图片描述

（3）justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列。
在这里插入图片描述

（4）justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
在这里插入图片描述

（5）justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
在这里插入图片描述

1.5.2.4. align-items

  元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
（1）align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
在这里插入图片描述
（2）align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
在这里插入图片描述
（3）align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
在这里插入图片描述
（4）align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）

1.5.2.5. align-content

  在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

<style>#main {width: 70px;height: 300px;border: 1px solid #c3c3c3;display: -webkit-flex;display: flex;background: red;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-content: center;align-content: flex-start;}#main div {width: 70px;height: 70px;}
</style>
<div id="main"><div style="background-color:coral;">div1</div><div style="background-color:lightblue;">div2</div><div style="background-color:pink;">div3</div>
</div>

（1）align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
在这里插入图片描述
（2）align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
在这里插入图片描述
（3）align-content: center; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
在这里插入图片描述
（4）align-content: stretch; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。
在这里插入图片描述
（5）align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
在这里插入图片描述
（6）align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。
在这里插入图片描述

1.5.3. justify-content

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素每个元素周围分配相同的空间 */
justify-content: space-evenly;  
/* 均匀排列每个元每个元素之间的间隔相等 */
justify-content: stretch;       
/* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit; /* 从父元素继承该属性 */
justify-content: initial; /* 设置该属性为它的默认值 */
justify-content: unset;

1.5.4. align-items

（1）stretch 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-（2）width/height’属性的限制。 测试 »
（3）center 元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 测试 »
（4）flex-start 元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 测试 »
（5）flex-end 元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 测试 »
（6）baseline 元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。 测试 »
（7）initial 设置该属性为它的默认值。请参阅 initial。
测试 »
（8）inherit 从父元素继承该属性。。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 解决tiktoken库调用get_encoding时SSL超时
  • IP纯净度对跨境电商有哪些影响
  • 【VMvare虚拟机-Ubuntu】解决内存不足问题
  • Linux bash 关联数组
  • 解锁定位服务：Flutter应用中的高德地图定位
  • Python 数据类型详解：列表、字典、元组与集合的操作指南
  • 【Linux进程】Linux Shell编程实战：构建简易脚本示例与技巧详解
  • 小说阅读书城微信小程序
  • C语言野指针
  • 小琳AI课堂：大语言模型如何符合伦理限制
  • ？？Nginx实现会话保持_Nginx会话保持与Redis的结合_Nginx实现四层负载均衡
  • 网络运维故障处理
  • java基础面试题总结
  • QT多线程编程（基础概念以及示例）
  • linux_L2_linux删除文件
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • [译]如何构建服务器端web组件，为何要构建？
  • 0基础学习移动端适配
  • ComponentOne 2017 V2版本正式发布
  • EOS是什么
  • httpie使用详解
  • javascript数组去重/查找/插入/删除
  • Nodejs和JavaWeb协助开发
  • node入门
  • SpiderData 2019年2月13日 DApp数据排行榜
  • Vue学习第二天
  • Yii源码解读－服务定位器（Service Locator）
  • 从0实现一个tiny react（三）生命周期
  • 猴子数据域名防封接口降低小说被封的风险
  • 基于Volley网络库实现加载多种网络图片（包括GIF动态图片、圆形图片、普通图片）...
  • 马上搞懂 GeoJSON
  • 设计模式 开闭原则
  • 新版博客前端前瞻
  • 学习JavaScript数据结构与算法 — 树
  • 异步
  • #HarmonyOS：Web组件的使用
  • $jQuery 重写Alert样式方法
  • (2)Java 简介
  • （9）YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (附源码)计算机毕业设计高校学生选课系统
  • （篇九）MySQL常用内置函数
  • （十二）springboot实战——SSE服务推送事件案例实现
  • (一)、python程序--模拟电脑鼠走迷宫
  • (原創) X61用戶，小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (转)AS3正则：元子符,元序列,标志,数量表达符
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .libPaths()设置包加载目录
  • .net 7和core版 SignalR
  • .NET C# 配置 Options
  • .NET Framework 3.5安装教程
  • .NET编程——利用C#调用海康机器人工业相机SDK实现回调取图与软触发取图【含免费源码】
  • .NET单元测试
  • .net获取当前url各种属性(文件名、参数、域名 等)的方法
  • .NET设计模式（2）：单件模式（Singleton Pattern）
  • .NET中分布式服务