目录
前言
CSS水平垂直居中
参考资料
系列文章
一、前言
难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。
话不多 BB,直接上才艺(代码演示)
tips:内容挺多的,顺着标题找吧
二、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;
text-align: center;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
}
</style>
- 效果展示
2、absolute+margin:auto
。定位为 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;
background-color: aqua;
width: 50px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 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%;
left: 50%;
/* 负margin须是高度或宽度的一半 */
margin-top: -50px;
margin-left: -50px;
}
</style>
效果展示
4、absolute+calc(css3计算属性)
。定位为 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: calc(50% - 50px);
left: 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%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
效果展示
6、line-height
。父元素:line-height=height,text-align:center。子元素:display:inline-block,vertical-align: middle。子元素水平垂直居中,不需要知道子元素的宽高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
line-height: 300px;
text-align: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
效果展示
7、flex
。目前主流的布局方案,父元素为 flex 容器且添加 align-items: center,justify-content: 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,justify-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、writing-mode
,这是搜索整理而来,参考资料见最后。子元素和孙子元素盒子 display: inline-block。孙子元素垂直居中,不需要知道该盒子的宽高
<!-- HTML -->
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
<style>
.grandfather {
width: 300px;
height: 300px;
border: 3px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.father {
writing-mode: horizontal-tb;
display: inline-block;
width: 100%;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
效果展示