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
方法一 利用 line-height 实现垂直居中
#example1 { height: 100px; line-height: 100px; background: #161616; color: #fff; width: 200px; }
<div id="example1">单行文字垂直居中</div>
这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的内容会溢出。
方法二 利用 display: table 实现垂直居中
#example2 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; display: table; } #example2 .inner{ display: table-cell; vertical-align: middle; height: 50px; background:#999; }
<div id="example2"> <div class="inner">块区域垂直居中</div> </div>
方法三 margin 填充
#example3 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; } #example3 .inner{ margin-left: auto; margin-right: auto; margin-top: calc((100px - 50px)/2); height: 50px; background:#999; }
<div id="example3"> <div class="inner">块区域垂直居中</div> </div>
这种方法需要知道内外容器的大小
方法四 经典 absolute 布局上下文垂直居中
#example4 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; } #example4 .inner{ height: 50px; width: 200px; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -100px; background:#999; }
<div id="example4"> <div class="inner">块区域垂直居中</div> </div>
这种方法内部容器的宽高,外部容器的宽高可以不定
方法五 Css3下 absolute 布局上下文垂直居中
#example5 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; } #example5 .inner{ position: absolute; left: 50%; top: 50%; background: #999; transform: translateX(-50%) translateY(-50%); }
<div id="example5"> <div class="inner">块区域垂直居中</div> </div>
这种方法内外容器都可以是不定的
方法六 利用margin:auto 居中
#expample6 { width: 400px; height: 100px; background: #eee; position: relative; } #expample6 .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 70%; background: #aaa; color:#222; }
<div id="expample6"> <div class="inner">Content here</div> </div>
方法七 利用 Flex布局 居中
#expample7 { width: 400px; height: 100px; background: #eee; display: flex; justify-content: center; align-items: center; } #expample7 .inner { height: 50px; width: 70%; background: #aaa; color:#222; }
<div id="expample7"> <div class="inner">Content here</div> </div>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
方法一 利用 line-height 实现垂直居中
这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的内容会溢出。
方法二 利用 display: table 实现垂直居中
方法三 margin 填充
这种方法需要知道内外容器的大小
方法四 经典 absolute 布局上下文垂直居中
这种方法内部容器的宽高,外部容器的宽高可以不定
方法五 Css3下 absolute 布局上下文垂直居中
这种方法内外容器都可以是不定的
方法六 利用margin:auto 居中
方法七 利用 Flex布局 居中
The text was updated successfully, but these errors were encountered: