2019獨角獸企業重金招聘Python工程師標準>>>

在網頁制作過程中，我們經常要用到圖片、文字的垂直居中。今天總結一下垂直居中的方法。

方法一 利用?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>

? 著作權歸作者所有

轉載于:https://my.oschina.net/wangch5453/blog/800398

總結

以上是生活随笔為你收集整理的垂直居中实现方式总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。