對於不是編輯中的**進行複製時，一定要注意：空格的複製可能會是整個html和樣式都顯示無效，需要刪除所有複製的空格才可以正常顯示，對於下面**的複製也一樣：
text-align:center 只對塊級元素有效，且是塊級元素內的內容水平居中，而不是整個塊級元素。
如果是想讓塊級元素水平居中，可在需要居中的塊級元素中新增margin:0 auto; 必須是固定寬度。
vertical-align:middle 只對行內元素有效 垂直居中 一行可以使用line-height=height.也可以垂直居中
當行高與元素的高度一致時，元素的內容會在垂直方向居中顯示；
設定height:100px; line-height沒有設定時，預設與當前字型大小一致。如果設定font-size:20px; 那麼line-height:20px;要居中顯示，那麼可寫：line-height:100px; 或者line-height:500%;
-----
在寫樣式時，一定記住先使用萬用字元統一不同瀏覽器的預設設定。
*
一，單行（塊級元素的內容不超過一行：p,div,h1,h2等標籤）居中（左右居中，上下居中）
在塊級元素中設定，解決辦法：
1，line-height:該行的字型大小 //垂直居中
2，text-align:center;
路上看到
房價收到非獨立開發建設勞動法
二，多行（多行中包括塊級元素）居中（左右居中，上下垂直居中）
在塊級元素中設定屬性，解決辦法：
在需要居中整個塊級元素中設定：
text-align:center;
把其父元素轉化成**，**的寬度是內容決定，所以這裡需要把寬度設定為100%（有固定的寬度就不用設定）：
display:table;
width:100%;
把居中塊級元素轉化成**的單元格：
display:talbe-cell;
**的單元格是行內元素，所以可以使用垂直居中屬性(該屬性預設值：baseline)：
vertical-align:center;
如下**：
*.warp
.inner
路上看到房價收到非獨/div>
使用position:relative; 和 position:absolute;來居中定位。
.partent
.child
其他都不變，就變為：
只設定兩個偏移量，child標籤會相對reative標籤左右居中。
left: 0;
right: 0;
margin:auto; //本元素相對於有relative的祖先元素左右垂直居中。
只設定兩個偏移量，child標籤會相對reative標籤上下垂直居中。
top: 0;
bottom: 0;
margin:auto; //本元素相對於有relative的祖先元素上下垂直居中。
本標籤沒有設定寬高，把偏移量都設定為0，其他不設定，那麼這個child標籤就會把relative這個祖先標籤填充滿。
top: 0;
left: 0;
bottom: 0;
right: 0;
-------------下面是居中例項：------------------
父元素使用position:relative;
子元素使用position:absolute;
如下：
***********************************==
單行居中：
height=line-height 上下垂直居中
text-align:center; 塊級元素內容左右居中
多行居中：
父元素設定 display:table. 且寬度固定
子元素設定 display:table-cell. vertical-align:middle;
定位居中一：
父元素設定position:relative;
子元素設定position:absolute; top:0; bottom:0; left:0; right:0; margin:auto auto;
其中如果只設定如下效果又不一樣：
left: 0;
right: 0;
margin: 0 auto; //本元素相對於有relative的祖先元素左右垂直居中。
top: 0;
bottom: 0;
margin:auto 0 ; //本元素相對於有relative的祖先元素上下垂直居中。
定位居中二：
父元素設定position:relative/fixed; 或者父元素是body。
子元素設定position:absolute; left:50%; top:50% margin-left:-(子元素寬度的一半); margin-top:-(子元素高度的一半);
固定寬度塊級元素:margin:0 auto; 左右居中。
塊級元素的內容:text-align: center; 左右居中。
行內元素:vertical-align:middle; 上下居中。
右下角的廣告定位：
position: fixed;
bottom:0;
right:10px;
是相對於瀏覽器視窗進行定位的，不會隨滾動條滾動而滾動。頁面的廣告就是最典型例子。
position:sticky 是粘性
.two
如下圖：
這是剛剛重新整理的頁面
這是滾動的頁面，紅色塊和瀏覽器頂部有10px;空隙，因為上面設定top:10px;
這是要居中的
HTML學習筆記 各種居中對齊
0.前言 水平居中基本方法 指定塊的寬度並設定塊的左右外邊距為auto，上下外邊距可取0，那麼該塊可以在父元素中水平居中。樣式如下 1 margin 0px auto 2 margin left auto margin right auto 垂直居中基本方法 設定塊的上下內邊距相等。樣式如下 pad...
HTML學習筆記 各種居中對齊
0.前言 水平居中基本方法 指定塊的寬度並設定塊的左右外邊距為auto，上下外邊距可取0，那麼該塊能夠在父元素中水平居中。樣式例如以下 1 margin 0px auto 2 margin left auto margin right auto 垂直居中基本方法 設定塊的上下內邊距相等。樣式例如以下...
垂直居中，對齊
單行文字 居中 div 一行文字一行文字一行文字一行文字 div div多行文字 居中 div class parent p class son 一行文字 一行文字 一行文字 p div parent soncss3彈性盒子 完美居中 div class flex container div cla...