?> 背景知识：:point_right: display, calc(), flex
“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。” ——James Anderson
以下的所有实现方案，笔者都在项目中验证过，每种方法都有自己的利与弊，大家可以根据具体的需求，选择最适合的方案。
<script v-pre type="text/x-template" id="flex"> <style> main{ width: 100%; min-height: 152px; display: flex; } main > span { background: #b4a078; color: white; margin: auto; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; } </style> Center me, please! <script> </script> </script>
display: flex+margin: auto不限定宽高 👍
<script v-pre type="text/x-template" id="grid"> <style> main{ width: 100%; min-height: 152px; display: grid; justify-content: center; align-items: center; } main > span { background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; } </style> Center me, please! <script> </script> </script>
display: grid不限定宽高 👍
<script v-pre type="text/x-template" id="position"> <style> main{ width: 100%; min-height: 152px; display: flex; } main > span { position: absolute; top: 50%; left: 50%; background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; margin-top: -16px; margin-left: -72px; } </style> Center me, please! <script> </script> </script>绝对定位
position: absolute限定宽高
<script v-pre type="text/x-template" id="calc"> <style> main{ width: 100%; min-height: 152px; display: flex; } main > span { position: absolute; top: calc(50% - 16px); left: calc(50% - 72px); background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; } </style> Center me, please! <script> </script> </script>绝对定位
position: absolute+calc()限定宽高
<script v-pre type="text/x-template" id="translate"> <style> main{ width: 100%; min-height: 152px; display: flex; } main > span { position: absolute; top: 50%; left: 50%; background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; transform: translate(-50%, -50%); } </style> Center me, please! <script> </script> </script>绝对定位
position: absolute+translate不限定宽高 👍
<script v-pre type="text/x-template" id="table"> <style> main { width: 100%; height: 152px; display: table; } main > div { display: table-cell; text-align: center; vertical-align: middle; } main > div > span { width: 50%; background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; } </style>仿table布局
display: table/table-cell+vertical-align: middle不限定宽高
Center me, please!
<script>
</script>
</script>
<script v-pre type="text/x-template" id="after"> <style> main { width: 100%; height: 152px; text-align: center; } main::after { content:''; display: inline-block; height: 100%; vertical-align: middle; } main > span { /* display: inline-block; vertical-align: middle; */ background: #b4a078; color: white; padding: .3em 1em .5em; border-radius: 3px; box-shadow: 0 0 .5em #b4a078; } </style> Center me, please! <script> </script> </script>伪元素
:after+vertical-align:middle不限定宽高
使用vertical-align实现居中时，居中元素display的值，必须为inline-block/inline，否则无法垂直居中，这是因为vertical-align只能用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。更多请查看MDN vertical-align