不确定高度的盒子垂直水平居中，换行样式的总结

一、不确定宽高的盒子垂直水平居中

1、

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    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: absolute top: 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:只能在半角空格或连字符处换行