【HTML-CSS】总结-6种实现元素 上下左右居中 方法--附演示效果
欢迎观阅本本篇文章，我是Sam9029
文章目录
- **上下左右居中**--**方法总结手册**
-
- 使用前注意
-
- 注意：每种方法的使用场景问题
- 1. 已知 宽高 的父元素 的情形下
- 2. 未知 宽高 的父元素的情形下
- 此文将介绍`6种` 实现元素 上下左右居中方法
-
- 1.定位+transform
- 2.flex布局实现
- 3.gird布局实现
- 4.`display:table`实现
- 5.line-height实现
- 6.未知名称法（使用纯定位）
- 注意事项
-
- 消去默认`margin`+`padding`影响
- `text-align`/`line-height`/`vertical-align` 设置 仅对元素内的 行内块元素和行内元素生效
- 参考
- 欢迎查阅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>
使用场景：
- 未知宽高 父元素
- 已知宽高 父元素
效果演示：
上下左右居中–定位+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>
使用场景：
- 未知宽高 父元素
- 已知宽高 父元素
效果演示：
上下左右居中–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>
使用场景：
- 未知宽高 父元素
- 已知宽高 父元素
效果演示：
上下左右居中–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>
使用场景：
- 未知宽高 父元素
- 已知宽高 父元素
效果演示：
上下左右居中–display-table实现 sam9029-codepen.io
5.line-height实现
- ❗line-height实现，❗也得多讲两句需要注意得地方
- 这里案例使用的DOM结构是
div.fa > text(直接是内容) - 同时 .fa 内部的 元素也应该是
行内块元素或者行内元素
- 这里案例使用的DOM结构是
- 这也不难理解，因为若使用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>
使用场景：
- 已知宽高 父元素
效果演示：
上下左右居中–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>
演示效果
上下左右居中–未知名称法（使用纯定位）SAM9029-codepen
注意事项
消去默认margin+padding影响
- 注意所有案例中，都默认消去了
margin+padding影响
/* 注意默认的margin+padding消去影响 */
body,div{
box-sizing:border-box;
margin:0;
padding:0;
}
text-align/line-height/vertical-align 设置 仅对元素内的 行内块元素和行内元素生效
参考
- [HTML] 上下左右置中对齐的三种方法-CodingStartup起码课-bilibili
- #HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B友笔记）
- 讲解了 定位，flex，display:table 的实现，推荐观阅
文章若有错误，敬请指正
欢迎查阅Sam9029 的其他文章
Sam9029-CSDN主页
**恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**