CSS 水平垂直居中

date
Apr 1, 2017
slug
css-horizontal-vertical-centering
status
Published
tags
HTML&CSS
summary
css horizontal and vertical centering
type
Post

初始化

水平垂直居中是老生常谈的话题,也是面试官比较喜欢问的问题。下面我对在实际中常常运用的几种方式做总结。HTML结构如下(这里我默认wrapper水平垂直居中):
<div class="wrapper">
	<div class="goal"></div>
</div>

有确定的宽高

一般常用在包含众多div的容器层(常称为wrapper,这里一般美工都会标注好宽高)。
.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;
}
这样就实现了goal水平垂直居中。

宽高不确定

可能更多地时候我们并不知道div的宽高,我们还需要实现水平垂直居中。那么我们可以这样做:
.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这个容器div设置水平/垂直(justify-content/align-items)的对齐方式,均设置为居中后容器中的.goal项目div自然水平垂直居中。(在flex布局中常把外层称为容器,内层div称为项目。)

利用伪元素来实现

利用伪元素可以避免使用margin时在IE中的bug问题。
.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;
}
该方法的重点在于利用伪元素给goal这个div提供vertical-align所需的对齐中心点。

常用技巧

左边栏

左边栏的常用实现方式有很多,这里我们介绍几种常用方式:
  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 属性可以实现的,但是有些兼容性不大好。主要用到如下几个: 上述
有趣的CSS题目(5): 单行居中,两行居左,超过两行省略

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

需求如下:
notion image
.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;
	}
}
只需要在父元素 .menu-item 中添加 display:table,在子元素(需要水平垂直居中的元素)中添加display:table-cell;vertical-align:middle 即可。

© i7eo 2017 - 2022