文字(文字)內容屬於行內元素
設定文字外層的盒子
垂直居中只要保證行高和盒子高度一致即可text-align:center /*水平居中*/
height = 100px; /*垂直居中 */
line-height = 100px;
**如下:
將文字所在的盒子
hello
display
設定成table-cell
注意:只有單元格元素才擁有text-align:center 水平居中
display:table-cell; 垂直居中
vertical-align:middle;
vertical-align
屬性
**如下:
hello
123
margin:0 auto;
只能設定水平居中,而margin:auto 0
不能設定垂直居中,因為margin
垂直塌陷問題
父級元素設定position:relative;
兒子元素設定
只要width: 100px;
height: 100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-right:-50px;
margin-left
為高度的一半,margin-right
為寬度的一半即可
**如下:
父級元素設定
你好
position:relative;
兒子元素設定
這樣設定以後,瀏覽器將自動將上下外邊距相同,左右外邊距相同,達到垂直居中的效果position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
**如下:
利用單元格法
父級元素
子元素display:table-cell;
text-align:center;
vertical-align:middle;
display:inline-table
因為text-align
只對行內元素和行內塊生效
**如下:
小盒子
123
CSS樣式美化div盒子
完整 片 font family 等線 light 字型為等線 light font size 1.5em 字型大小為預設值的2倍 line height 1.5em 行高為1.5倍 color deepskyblue 字型顏色為deepskyblue line break unset 斷句方式 t...
CSS實現div盒子水平垂直居中的方式
網上看到有很多方式,這裡記錄一下我用起來順手的幾種方式,這裡敲黑板做筆記,哈哈 首先預備工作,假設這是登入介面,那通常會涉及到背景撐滿螢幕 明顯看到會出現滾動條 可以用兩種方式讓滾動條消失 html,body好啦下面,開始進入正題,實現 class middle 這個div盒子的垂直居中顯示 1.前...
初識css之div盒子模型
說到css,就不得不說到盒子這個重要的布局模組了 所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。不同部...