一、不確定寬高的盒子垂直水平居中

1、

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:500px;
　　 height: 500px;
}

.child {
    display: inline-block;
}

2、

.container {
  　　position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//衍生
inner{margin: auto;position: absolutetop: 0; left: 0; bottom: 0; right: 0;}
 

3、vh和vw是兩個比較偏的單位，是指“viewport的height和width的1%”，比如說50vh就是當前視口（視窗的高度，實驗中包含了滾動條）高度的50%。也就是說vw將獲得和1%差不多的window寬度。

.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}

　　衍生

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%); 
}

4、彈性盒子

 .father {
        display: flex;
        justfy-content: center;
        align-items: center;
    }

二、換行樣式

先給出各種方式，再具體介紹每一個屬性。

強制不換行:

p { white-space:nowrap; }

自動換行:

p { word-wrap:break-word; }

強制英文單詞斷行:

p { word-break:break-all; }

注意：設定強制將英文單詞斷行，需要將行內元素設定為塊級元素。

超出顯示省略號:

p{text-overflow:ellipsis;overflow:hidden;}
 

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

• white-space: 屬性設定如何處理元素內的空白
• normal: 預設。空白會被瀏覽器忽略。
• pre: 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標籤。
• nowrap: 文字不會換行，文字會在在同一行上繼續，直到遇到 br 標籤為止。
• pre-wrap: 保留空白符序列，但是正常地進行換行。
• pre-line: 合併空白符序列，但是保留換行符。
• inherit: 規定應該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

• word-wrap: 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字串太長而找不到它的自然斷句點時產生溢位現象。
• normal: 只在允許的斷字點換行(瀏覽器保持預設處理)
• break-word: 在長單詞或URL地址內部進行換行

word-break: normal|break-all|keep-all;

• word-break 屬性用來標明怎麼樣進行單詞內的斷句。
• normal：使用瀏覽器預設的換行規則。
• break-all:允許再單詞內換行
• keep-all:只能在半形空格或連字元處換行