常用的css垂直居中方案

CSS 发布时间:2022/07/12 阅读量:221 来源:优尚设计
在进行HTML制作页面的过程中,总会遇到需要将元素或者文字进行水平垂直居中的要求。下面优尚设计就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

行内元素(单行文字垂直居中)

要点:设置 line-height = height

.test {
	height: 200px;
	border: 1px solid red;
	line-height: 200px
}

块级元素:绝对定位

优点:兼容性不错
缺点:需要提前知道尺寸

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -40px;
	width: 80px;
	height: 40px;
	background: #00f
}

块级元素:绝对定位 + transform

优点:不需要提前知道尺寸
缺点:兼容性不好

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 40px;
	background: #00f;
	transform: translate(-50%,-50%)
}

块级元素:绝对定位 + margin: auto;

优点:不需要提前知道尺寸,兼容性好
缺点:这个方法是我最喜欢用的一个,要说缺点的话,我目前还不知道。

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 80px;
	height: 40px;
	background: #00f
}

块级元素:padding

缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)

.parent {
	padding: 5% 0
}
.child {
	padding: 10% 0;
	background: #00f
}

块级元素:display: table-cell

.parent {
	display: table;
	width: 600px;
	height: 200px;
	border: 1px solid red
}
.child {
	display: table-cell;
	vertical-align: middle
}

或者:

.parent {
	display: table-cell;
	height: 300px;
	border: 1px solid red;
	vertical-align: middle
}

同样适用于多行文字的垂直居中处理

HTML代码:

<div class="parent">
  <span class="child">深圳市优尚企业形象设计有限公司成立于2013年,十年来一直立足深圳,面向全国。为品牌和企业提供品牌网站建设、集团网站建设、营销型网站建设、小程序开发、微信公众号开发、网站搜索引擎优化、品牌口碑营销等服务。我们通过商业策略、技术实现、情感连结融入互联网设计来创造具有活力的网站视觉及营销体验,结合线上资源来实现有效的价值传播</span>
</div>

CSS代码:

.parent {
	display: table-cell;
	width: 400px;
	height: 300px;
	border: 1px solid red;
	vertical-align: middle
}
.child {
	display: inline-block;
	background: #00f;
	vertical-align: middle
}

块级元素:display: flex

缺点:兼容性不好

.parent {
	display: flex;
	width: 600px;
	height: 200px;
	border: 1px solid red;
	align-items: center;
	justify-content: center
}
.child {
	background: #00f
}

块级元素:伪元素

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid red;
	text-align: center
}
.child {
	display: inline-block;
	width: 100px;
	height: 40px;
	background: #00f;
	vertical-align: middle
}
.parent::before {
	display: inline-block;
	height: 100%;
	content: ''
	vertical-align: middle
}

块级元素:calc()

缺点:兼容性太差,需要计算,并不推荐。

.parent {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid red
}
.child {
	padding: -webkit-calc((100% - 100px)/ 2);
	padding: -moz-calc((100% - 100px)/ 2);
	padding: -ms-calc((100% - 100px)/ 2);
	padding: calc((100% - 100px)/ 2);
	width: 100px;
	height: 100px;
	background: #00f;
	background-clip: content-box
}

块级元素:inline-block

HTML 代码:

<div class="parent">
  <div class="child">深圳市优尚企业形象设计有限公司</div>
  <div class="brother">十年来一直立足深圳,面向全国</div>
</div>

CSS 代码:

.parent {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid red
}
.brother,.child {
	display: inline-block;
	vertical-align: middle
}
.child {
	background: #00f;
	font-size: 12px
}
.brother {
	height: 400px;
	font-size: 0
}

表格元素:table

当然,还有一种方法,就是使用 table 布局:因为 html 还要加 table 等标签,冗余有点多,而且结构也改变了。

<table>
  <tr>
    <td align="center" valign="middle">content</td>
  </tr>
</table>
文章标签: 垂直居中 CSS
微信
网站定制咨询 网站定制咨询