这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
未知高度元素垂直居中的实现方式有哪些？
- 以下所有案例均为这个结构
<!-- 结构 -->
<div class="wrap">
<div class="child">111</div>
</div>
- 绝对定位 + transform: translate(-50%, -50%)
.wrap {
position: relative;
}
.child {
/* 绝对定位的元素不设置宽高，只能由内容撑开 */
position: absolute;
top: 50%;
left: 50%;
/* translate：设置元素在x轴、y轴上的平移变换 */
transform: translate(-50%, -50%);
}
- flex布局
.wrap {
/* flex容器 */
display: flex;
/* 沿主轴方向居中排列 */
justify-content: center;
}
.child {
/* flex项目 */
/* 交叉轴方向居中 */
align-self: center;
}
- table布局
<div class="wrap">
<div class="child">
<div>sadgsdgasgd</div>
</div>
</div>
<style>
.wrap{
display:table;
width: 200px;
height: 200px;
border: 1px solid red;
/* 子元素会继承父元素的属性 */
text-align:center;
}
.child{
background:#ccc;
display:table-cell;
vertical-align:middle;
}
.child div{
background:red;
}
</style>
拓展回顾
🔥 绝对定位的性质
- 绝对定位的元素脱离标准流，会让出标准流位置（即：下面的元素可以到自己的位置来。自己将其覆盖）。
- 可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
🔥 flex布局（弹性布局）
flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”flex容器属性flex-direction属性：决定主轴的方向flex-wrap属性: 缺省情况下，flex项目排成一条线。可通过该属性换行。justify-content属性: 项目在主轴上的对齐方式及额外空间的分配方式align-items属性: 定义项目在交叉轴上的对齐方式align-content属性：定义了在交叉轴方向的对齐方式及额外空间分配。类似于主轴上justify-content
flex项目属性align-self属性: 定义项目的对齐方式，可覆盖align-items属性。默认值为auto，即继承父元素的align-items属性flex属性：flex-grow(扩大),flex-shrink(缩小)和flex-basis的简写，默认值是0 1 auto。后两个可选
实现图片垂直居中
- flex布局
.box {
display: flex;
width: 600px;
height: 600px;
justify-content: center;
align-items: center;
border: 1px solid rgb(235, 206, 206);
}
<div class="box">
<img src="./img/sky.webp" alt="天空">
</div>
- display:table
.box {
display: table;
width: 600px;
height: 600px;
text-align: center;
border: 2px solid rgb(192, 230, 142);
}
.box .imgBox {
display: table-cell;
vertical-align: middle;
}
<div class="box">
<div class="imgBox">
<img src="./img/sky.webp" alt="天空">
</div>
</div>
- 绝对定位（推荐：兼容性好）
.box {
position: relative;
width: 1200px;
height: 600px;
border: 2px solid rgb(192, 230, 142);
}
.box img {
position: absolute;
/* left定位的50%,是父元素宽度的50% */
left: 50%;
top: 50%;
/* x轴回去的是自身宽度的50% */
transform: translate(-50%,-50%);
}
<div class="box">
<img src="./img/sky.webp" alt="天空">
</div>
文本元素如何居中
CSS设置文字水平居中:text-align: centerCSS设置文字垂直居中：文本行高(line-height属性)和所在区域高度(height)设置一致- 多行文本垂直居中
- 父元素高度不固定，高度只能通过内部文本来撑开。设置内填充（
padding）的值来使文本看起来垂直居中，设置padding-top和padding-bottom的值相等 - 父元素高度固定：使用
vertical-align:middle +display:table-cell使文字垂直居中
- 父元素高度不固定，高度只能通过内部文本来撑开。设置内填充（
拓展回顾
text-align: center特点- 应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
- 其具有向下传递性，会不断的向子元素传递。
参考文章
不错的flex布局文章：Flex-弹性布局原来如此简单！！
