文字（文字）內容屬於行內元素
設定文字外層的盒子
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元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。不同部...