CSS display: table-cell 用于水平垂直居中
生活随笔
收集整理的這篇文章主要介紹了
CSS display: table-cell 用于水平垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS display: table-cell 用于水平垂直居中
在 CSS 設置居中時候，水平和垂直居中的設置略有不同，通常我們使用 text-align:center 對圖片、文字等行內元素（inline / inline-block）進行水平居中，并使用 line-height 對單行文字設置垂直居中（僅適用于單行文字）。但是，如果使用表格，則可以通過 td（單元格元素）的 align="center" 及 valign="middle" 屬性設置單元格內容的水平和垂直居中。 而對于那些不是表格的元素，可以通過 display: table-cell 將其模擬成一個表格單元格 td，這樣就可以通過 CSS 的vertical-align: middle; /* 垂直居中*/ 和 text-align: center; /* 水平居中*/ 屬性進行設置。
display 值及其作用
| table | 塊元素級的表格 | <table> |
| inline-table | 內聯元素級的表格 | <table> |
| table-caption | 表格標題 | <caption> |
| table-cell | 表格單元格 | <td> |
| table-row | 表格行 | <tr> |
| table-row-group | 表格行組 | <tbody> |
| table-column | 表格列 | <col> |
| table-column-group | 表格列組 | <colgroup> |
| table-header-group | 表格標題組 | <thead> |
| table-footer-group | 表格腳注組 | <tfoot> |
display: table-cell 實現水平垂直居中
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.container{width: 100px;height:50px;border: 1px solid black;display: table-cell; /* 模擬為td單元格，同時形成了 BFC *//*display: table-caption 如果設置為此項 則不能使用水平和垂直居中*/ vertical-align: middle; /* 垂直居中*/text-align: center; /* 水平居中*/margin:50px; /* table-cell 對 margin 不感知，此處設置無效*/}</style></head><body><div class="container">a</div><div class="container">b</div><div class="container">c</div></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.con{background: red;display: table; /* 將父元素div模擬為塊級表格 table*/margin: 50px; /* 設置父元素 table 的margin*/}.container{width: 200px;height:50px;border: 1px solid black;display: table-cell; vertical-align: middle; text-align: center; /*margin: 50px;*/ 去掉設置無效的 margin}</style></head><body><div class="con"><div class="container">a</div><div class="container">b</div><div class="container">c</div></div></body> </html>模擬之后，其屬性的使用，就可以將其視作一個標簽進行使用。
reference
display:table-cell實現水平垂直居中
css Table布局-display:table
CSS布局奇淫技巧之--各種居中
轉載于:https://www.cnblogs.com/HevateArvin/p/10270403.html
總結
以上是生活随笔為你收集整理的CSS display: table-cell 用于水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mybatis学习第一天——Mybati
- 下一篇： 【原创】大数据基础之Ambari（1）简