?> Background：:point_right: display, calc(), flex
"44 year ago we put a man on the moon,yet we still can't vertically centre things in CSS。" ——James Anderson
All the practices mentioned in the following part, I have experimented it on my own project. Those practices have both advantages and disadvantages. You guys can pick the most suitable solution according to your preference.
<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: autono limit to width & height 👍
<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: gridno limit to width & height 👍
<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>absolute-positioned
position: absolutelimit the width & height
<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>absolute-positioned
position: absolute+calc()limit the width & height
<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>absolute-positioned
position: absolute+translateno limit to width & height 👍
<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-like layout
display: table/table-cell+vertical-align: middleno limit to width & height
<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>pseudo-elements
:after+vertical-align:middleno limit to width & height
When you are applying the vertical-align to achieve the goal of centering, please remeber to set the value of display element to inline-block/inline, otherwise, you cannot make it center vertically. The reason is that vertical-align is utilized to define the way of vertical alignment only for the inline or the table-cell element. Please click MDN vertical-align for more information.