欢迎大家来到IT世界,在知识的湖畔探索吧!
一、CSS 垂直居中
1、父元素display:table-cell;vertical-align:center,里面的子元素就会实现垂直居中,不需要知道子元素的宽高
/* HTML */
<div class='father'>
<div class='son'></div>
</div>
<style>
.father {
display: table-cell;
vertical-align: middle;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
复制代码
欢迎大家来到IT世界,在知识的湖畔探索吧!
- 效果展示
2、absolute+margin:auto,定位为 absolute 的元素垂直居中,不需要知道该元素的宽高
欢迎大家来到IT世界,在知识的湖畔探索吧!<!-- HTMl --><div class="father"> <div class="son"></div></div><style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; background-color: aqua; width: 50px; height: 50px; top: 0; bottom: 0; margin: auto; }</style>复制代码
- 效果展示
3、absolute+负margin,定位为 absolute 的元素垂直居中,需要知道该元素的宽高
<!-- HTMl --><div class="father"> <div class="son"></div></div><style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; width: 100px; height: 100px; background-color: aqua; top: 50%; /* 负margin须是高度的一半 */ margin-top: -50px; }</style>复制代码
- 效果展示
4、absolute+calc(css3计算属性),定位为 absolute 的元素垂直居中,需要知道该元素的宽高
欢迎大家来到IT世界,在知识的湖畔探索吧!<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
/* 注意"-"两边要隔开 减去的须是高度的一半*/
top: calc(50% - 50px);
}
</style>
复制代码
- 效果展示
5、absolute+transform,定位为 absolute 的元素垂直居中,不需要知道元素的宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
transform: translateY(-50%);
}
</style>
复制代码
- 效果展示
6、line-height,父元素:line-height=height。子元素:display:inline-block。子元素垂直居中,不需要知道子元素的宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
line-height: 300px;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
复制代码
- 效果展示
7、flex,目前主流的布局方案,父元素为 flex 容器且添加 align-items: center,控制子元素的布局。不需要知道子元素的宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
align-items: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
复制代码
- 效果展示
8、grid ,目前最强大的布局方案,使用还尚未流行。父元素为 grid,子元素添加 align-self: center。不需要知道子元素的宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: grid;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
align-self: center;
}
</style>
复制代码
- 效果展示
9、伪元素after或before,这是我搜出来整理的。CSS 真的太神(s)奇(d)了,毫无道理。子元素垂直居中不需要知道宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: block;
}
.father::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.son {
background-color: aqua;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
}
</style>
复制代码
- 效果展示
10、隐藏节点(盒子)实现 该原理就是使用盒子占位置,但不显示出该盒子。另外的盒子垂直居中,子盒子的宽高需由实际计算时确定
<!-- HTML -->
<div class="father">
<div class="hide"></div>
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
background-color: aqua;
width: 50%;
height: 50%;
}
.hide {
width: 50px;
height: 25%;
}
</style>
复制代码
- 效果展示
11、writing-mode,这是搜索整理而来,参考资料见最后。子元素盒子 display: inline-block。子元素垂直居中,不需要知道该盒子的宽高
<!-- HTML -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
writing-mode: horizontal-tb;
display: inline-block;
}
</style>
复制代码
- 效果展示
三、参考资料
作者:soloplayer
链接:https://juejin.cn/post/6904138129612439560
来源:掘金
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/31561.html