We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
如果 .parent 的 height 不写,只需要 padding: 10px 0; 或者 line-height 就能将 .child 垂直居中。
.parent
height
padding: 10px 0;
line-height
.child
如果 .parent 的 height 写死了,就很难把 .child 居中 ( 所以,能不写 height 就千万别写 height。)
如果你 .parent 不得不定高 ( 如全屏高度 ),以下是几种垂直居中的方法。
//HTML <table class="parent"> <tr> <td class="child"> 我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中 </td> </tr> </table>
//CSS .parent{ border: 1px solid red; height: 600px; } .child{ border: 1px solid green; }
after
before
inline block
//HTML <div class="parent"> <span class=before></span><div class="child"> 我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中 </div><span class=after></span> </div>
//CSS .parent{ border: 3px solid red; height: 600px; text-align: center; } .child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; } .parent .before{ outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } .parent .after{ outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; }
//HTML <div class="parent"> <div class="child"> 我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中 </div> </div>
//CSS .parent{ border: 3px solid red; height: 600px; text-align: center; } .child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; } .parent:before{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } .parent:after{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; }
div
table
//HTML <div class="table"> <div class="td"> <div class="child"> 我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中 </div> </div> </div>
//CSS div.table{ display: table; border: 1px solid red; height: 600px; } div.tr{ display: table-row; border: 1px solid green; } div.td{ display: table-cell; border: 1px solid blue; vertical-align: middle; } .child{ border: 10px solid black; }
margin-top: -50%;
//HTML <div class="parent"> <div class="child"> 我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中我要居中 </div> </div>
//CSS .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 100px; margin-top: -50px; }
translate: -50%;
//CSS .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
absolute
margin
auto
//HTML <div class="parent"> <div class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 </div> </div>
//CSS .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; position: absolute; width: 300px; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
//CSS .parent{ height: 600px; border: 3px solid red; display: flex; justify-content: center; align-items: center; } .child{ border: 3px solid green; width: 300px; }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
如果
.parent
的height
不写,只需要padding: 10px 0;
或者line-height
就能将.child
垂直居中。如果
.parent
的height
写死了,就很难把.child
居中 ( 所以,能不写height
就千万别写height
。)如果你
.parent
不得不定高 ( 如全屏高度 ),以下是几种垂直居中的方法。方法:
1. table 自带功能
2. 100% 高度的
after
before
加上inline block
3.
div
装成table
4.
margin-top: -50%;
5.
translate: -50%;
6.
absolute
margin
auto
7. flex
The text was updated successfully, but these errors were encountered: