在樣式佈局中,我們常常碰到需要將元素置中。透過css實作元素的水平居中較為簡單:對文本,只需要對其父級元素設定text-align: center;,而對p等區塊級元素,只需要設定其left和right的margin值為auto。要實現元素的垂直居中,有人會想到css中的vertical-align屬性,但是它只對擁有valign特性的元素才生效,例如表格元素中的
、這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。因此我們需要透過別的方法去實現元素的垂直居中,下面我總結了幾種了常用垂直居中方法。
單行文本垂直居中
對於單行文本,我們只需要將文本行高(line-height)和所在區域高度(height)設為一致即可:
<!--html代码--> <p id="p1"> 这是单行文本垂直居中 </p> /*css代码*/ #p1{ width: 300px; height: 100px; margin: 50px auto; border: 1px solid red; line-height: 100px; /*设置line-height与父级元素的height相等*/ text-align: center; /*设置文本水平居中*/ overflow: hidden; /*防止内容超出容器或者产生自动换行*/ }
#多行文字垂直居中
#多行文字垂直居中分為兩種情況,一個是父級元素高度不固定,隨著內容變化;另一個是父級元素高度固定。
父級元素高度不固定
父級高度不固定的時,高度只能透過內部文字來撐開。這樣,我們可以透過設定內填充(padding)的值來使文字看起來垂直居中,只需設定padding-top和padding-bottom的值相等:
<!--html代码--> <p id="p1"> 这是多行文本垂直居中, 这是多行文本垂直居中, 这是多行文本垂直居中, 这是多行文本垂直居中。 </p> /*css代码*/ #p1{ width: 300px; margin: 50px auto; border: 1px solid red; text-align: center; /*设置文本水平居中*/ padding: 50px 20px; }
#父級元素高度固定
#本文一開始就提到css中的vertical-align屬性,但是它只對擁有valign特性的元素才生效,結合display: table;,可以使得p模擬table屬性。因此我們可以設定父級p的display屬性:display: table;;然後再增加一個p包含文字內容,設定其display:table-cell;和vertical-align:middle;。具體程式碼如下:
<!--html代码--> <p id="outer"> <p id="middle"> 这是固定高度多行文本垂直居中, 这是固定高度多行文本垂直居中, 这是固定高度多行文本垂直居中, 这是固定高度多行文本垂直居中。 </p> </p> /*css代码*/ #outer{ width: 400px; height: 200px; margin: 50px auto; border: 1px solid red; display: table; } #middle{ display:table-cell; vertical-align:middle; text-align: center; /*设置文本水平居中*/ width:100%; }
#但是,在IE7中顯示效果如下:
這是因為IE7及以下的版本並不能很好的支援display:table和display:table-cell屬性,當然,如果你不考慮IE7以下的版本的瀏覽器,上述方法是可以實現垂直居中。如果把IE7及以下版本考慮進去,我們可以用到CSS hack的知識來設定針對不同瀏覽器的屬性。
<!--html代码--> <p id="outer"> <p id="middle"> <p id="content"> 这是固定高度多行文本垂直居中(兼容IE7), 这是固定高度多行文本垂直居中(兼容IE7), 这是固定高度多行文本垂直居中(兼容IE7), 这是固定高度多行文本垂直居中(兼容IE7)。 </p> </p> </p> /*css代码*/ #outer{ width: 400px; height: 200px; margin: 50px auto; border: 1px solid red; display: table; *position:relative; //兼容IE7及以下版本 } #middle{ display:table-cell; vertical-align:middle; text-align: center; /*设置文本水平居中*/ width:100%; *position:absolute; //兼容IE7及以下版本 *top:50%; } #content { *position:relative; //兼容IE7及以下版本 *top:-50%; }
子p垂直居中
1、根據子p具體大小設定偏移
如果子p固定大小,設定水平和垂直偏移父元素的50%,再根據實際長度將子元素向上和向左挪回一半大小
<!--html代码--> <p id="outer"> <p id="middle"> 子p(固定大小)垂直居中 </p> </p> /*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; position: relative; } #middle{ background-color: #E41627; width: 100px; height: 100px; margin: auto; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
##該方法相容於IE7、IE6,但只針對子p大小的固定的情況下才有效。大部分時候,子p的大小是不固定的,下面介紹子p大小不固定時的方法。由於顯示效果與這個效果基本上一樣,效果圖就不一一貼出來,讀者可以自行複製程式碼驗證。
2、利用translate
針對第一種方法中水平和垂直偏移父元素的50%後,不設定margin值,而是利用除css3中的transform屬性設定translate的值,css程式碼部分改成如下:
#middle{ background-color: #E41627; width: 100px; height: 100px; margin: auto; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); }
這種方法需要注意transform是css3中的屬性,使用時注意瀏覽器的相容性,IE9之前的版本不支援。
3、利用絕對佈局absolute
<!--html代码--> <p id="outer"> <p id="middle"> 利用绝对定位实现子p大小不固定垂直居中 </p> </p> /*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; position: relative; } #middle{ background-color: #E41627; width: 100px; //子p大小可随意设置 height: 100px; margin: auto; position: absolute; top: 0;left: 0;right: 0;bottom: 0; }
4、利用vertical-align
<!--html代码--> <p id="outer"> <p id="middle"> 利用vertical-align属性实现子p大小不固定垂直居中 </p> </p> /*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; display: table-cell; vertical-align: middle; } #middle{ background-color: #E41627; width: 100px; height: 100px; margin: 0 auto; }
5、利用display: flex
<!--html代码--> <p id="outer"> <p id="middle"> 利用display: flex实现子p大小不固定垂直居中 </p> </p> /*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; display: flex; justify-content: center;/*实现水平居中*/ align-items:center; /*实现垂直居中*/ } #middle{ background-color: #E41627; width: 100px; height: 100px; }
这种方法只需要在父级p中加上这三句话就行,但是在IE中兼容性不好,IE9及以下IE浏览器版本都不支持。
以上是我总结的一些常用到的垂直居中的设计方法,大家可以根据自己的需要选择合适的设计方式。
以上是CSS文字與div垂直居中方法範例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!