文本、元素居中，超过指定行数显示省略号

1，单行文本居中显示

• 对于单行文本的水平居中，最常用的就是设置text-align:center即可。
• 单行文本垂直居中，最常用的就是设置行高line-height和容器的高度height等值即可。
• 有些时候容器的高度没有固定，那么通常就是设置padding-top和padding-bottom来使其居中。
• 不管是多行还是单行，都可以使用下面的方法来使其垂直居中

.test{
	width: 200px;
	height: 100px;
	border: 1px solid #ff8200;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

<div class="test">
	千里之行，始于足下
</div>

对于目前chrome版本 47.0.2526.80 (64-bit)的浏览器和FF 44.0.2都支持display:flex 和 align-items属性，不需要加各自的前缀。由于机器上未安装ie，所以没有亲测。

2，多行文本居中显示

• 对于多行文本的垂直居中显示，除了使用上面的方式外，也可以用如下方式

#div{
width: 50px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

3，超过一行，最后面显示省略号

• 超过一行用省略号显示，大家都应该知道了,关键代码如下

.ellip{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#test{
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 200px;
                // 下面两行是处理长文本单词或数字不换行问题
                word-wrap: break-word; 
                word-break: break-all;
	}

4，超过两行，第二行最后面显示省略号

最近在搞一个手机端的项目，很多页面都要求超过2行后用省略号显示，一下子有点懵。经过一番搜索，终于找到了一个适合移动端的解决方案。

#test{
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 200px;
	}

关键代码已经用红色标出。由于目前该属性只有谷歌浏览器支持，所以对于做移动端的小伙伴来说是个不错的选择。

但是移动开发的小伙们别高兴的太早，在本人捣鼓的过程中，发现了一个问题：如果对于输入的字符都是汉子，没有问题。但是如果输入的都是英文或数字等，那么上面的方法就不是很起作用了。

实际上内容已经超过了2行，但是却只显示一行，并且使用裁剪方式显示。

这是因为对于长文本英文或者数字，只是这样的设置还不行，还需要这样处理下

 word-wrap: break-word; 
 word-break: break-all; // 这两行用来处理长文本单词或者数字

当然了，你也可以使用jquery的一款插件jquery.dotdotdot.js来搞定了超过2行显示省略号的问题。

5，元素居中显示

• 元素居中显示。最常用的使一个块状元素居中显示，可能就是使用margin-left:auto;margin-right:auto这种方法了。
• 对于css3如此强大的今天，我们可以使用如下方法来使一个元素或者多个元素居中

#container{ 
display: box; 
display: -webkit-box; 
display: -moz-box;
width:300px; 
height: 200px; 
margin: 50px 20px;
border: 1px solid #ccc; 
-webkit-box-pack:center; 
-moz-box-pack:center; 
-webkit-box-align:center; 
-moz-box-align:center;
} 
#div1{ 
background: orange;
} 
#div2{ 
background: yellow; 
} 
#div3{ 
background: green; 
} 
#div1,#div2,#div3{
width: 50px;
height: 30px;
}

关键代码已用红色标出。测试结果如上图。

目前该属性所有的浏览器都不支持，使用的时候必须加上各自的前缀。

需要注意的是：以上红色标出的代码是使用在父级元素上的，他使子级元素水平垂直居中。居中的是子级元素，而不是元素内的文本。

完结