CSS 水平垂直居中

初始化

<div class="wrapper">
	<div class="goal"></div>
</div>

有确定的宽高

.wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -100px 0 0 -100px;
		width: 200px;
		height: 200px;
		background-color: #ccc;
}
.goal {
		position: relative;
		top: 50%;
		left: 50%;
		margin: -50px 0 0 -50px;
		width: 100px;
		height: 100px;
		background-color: deeppink;
}

宽高不确定

.wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -100px 0 0 -100px;
		width: 200px;
		height: 200px;
		background-color: #ccc;
}
.goal {
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: deeppink;
　　 transform: translate(-50%, -50%);
}

flex 布局

.wrapper {
		display: flex;
		position: absolute;
	  top: 50%;
	  left: 50%;
	  margin: -100px 0 0 -100px;
		align-items: center;
		justify-content: center;
	  width: 200px;
	  height: 200px;
	  background-color: #ccc;
}
.goal {
		position: absolute;
		top: 50%;
		left: 50%;
	  background-color: deeppink;
　　 transform: translate(-50%, -50%);
 }

利用伪元素来实现

.wrapper {
		width: 200px;
		height: 200px;
　　 text-align: center;
		background-color: #ccc;
}
.goal {
		display: inline-block;
		width: 100px;
		height: 100px;
		vertical-align: middle;
		background-color: deeppink;
}
.wrapper:after {
		content: ' ';
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
		background-color: deeppink;
}

常用技巧

左边栏

1. 边框法：

border-left: 5px solid blue;

1. 伪元素法：

div:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 5px;
		height: 60px;
		background-color: blue;
}

内/外/四周阴影

box-shadow:-5px 0px 0 0 blue;
box-shadow:inset 5px 0px 0 0 blue;
box-shadow: 0 0 5px blue
/* box-shaow 不占用元素的宽高*/

单行居中，俩行居左，超过俩行省略

display: -webkit-box; // 设置display，将对象作为弹性伸缩盒子模型显示
    　　　-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
   　　　 -webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列

有趣的CSS题目（5）： 单行居中，两行居左，超过两行省略

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 所有题目汇总在我的 Github （https://github.com/chokcoco/iCSS/issues/1）。 5、单行居中显示文字，多行居左显示，最多两行超过用省略号结尾 这题就厉害了我的哥。 题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略号结尾，效果如下： 不愿看长篇大论的可以先看看效果：-webkit- 内核下 Demo 戳我（http://codepen.io/Chokcoco/pen/ALpdLj） 接下来就一步一步来实现这个效果。 首先是单行居中，多行居左 居中需要用到 text-align:center，居左是默认值也就是text-align:left。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下： 现在，我们在 h2 中间，嵌套多一层标签 p： 我们让内层 p 居左 text-align:left，外层 h2 居中 text-align:center，并且将 p 设置为display:inline-block ，利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左，CSS 如下： 得到的效果如下： 完成了第一步，接下来要实现的是超出两行显示省略符号。 超出两行省略 多行省略是有专门的新 CSS 属性可以实现的，但是有些兼容性不大好。主要用到如下几个： 上述

http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551367&idx=2&sn=8a158fcb2a983acd48f71423db76e4a0&chksm=8025a146b7522850d6cccb959e8a9f32e9866379d2b75b1dad0625c752d57611400d85fa80e1&scene=21#wechat_redirect

短小标题的快速水平垂直居中法

.menu-item {
		display: table;
		width: 56px;
		height: 49px;
		padding: 0 12px;
		text-align: center;
		
	.text {
			display: table-cell;
			width: 56px;
			vertical-align: middle;
			.border_1px(rgba(7, 17, 27, .1));
			font-size: 12px;
	}
}