子元素水平垂直都居中的实现

在网页布局中,如何实现子元素在水平方向和垂直方向居中,如图所示:

我知道的有这样的两种方式:

1.使用弹性布局实现

2.使用定位和平移实现

另外还有以下两种常用情况

3.窗口在整个屏幕水平垂直居中,还可以使用绝对定位实现。

4.多行文字垂直居中

1.使用弹性布局实现

在示例中,父元素.father宽度高度是300像素,子元素.son是160像素。关键的3行代码都加了备注。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局实现子元素水平垂直都居中</title>
		<style>
		/* 把父元素设置为弹性布局,设置水平和垂直都居中,其中的子元素就会水平和垂直都居中 */
		 .father{
		      width: 300px;
		      height: 300px;
		      border: 2px solid #0B97EA;
			  margin: 0 auto;
		      display: flex;       /*弹性布局*/
		      justify-content: center;  /*水平居中*/
		      align-items: center;  /*垂直居中*/
		  }
		  .son{
		      width: 160px;
		      height: 160px;
			  background-color: #FFB000;
		   }   
		</style>
	</head>
	<body>
		<div class="father">
				<div class='son'></div>
		</div>
	</body>
</html>

2.使用定位和平移实现

在没有弹性布局之前,使用这种方式来实现。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局实现水平垂直都居中</title>
		<style>
			.father {
				width: 300px;
				height: 300px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;   /*相对定位*/
				border: 2px solid #0B97EA;
			}
			.son {
				width: 160px;
				height: 160px;
				background-color: #FFB000;
				position: absolute;  	/* 绝对定位 */
				top: 50%;   			/* 距离顶端50% */
				left: 50%;   		/* 距离左侧50% */
				transform: translate(-50%, -50%);  /* 往左、往上平移自身的50% */
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class='son'></div>
		</div>
	</body>
</html>

3.窗口在整个屏幕水平垂直居中,还可以使用绝对定位实现。

设置该元素为绝对定位,四个方向距离为0,同时设置margin:auto,可以实现。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位实现水平垂直都居中</title>
		<style>
			.son {
				width: 160px;
				height: 160px;
				background-color: #FFB000;
				/*以下5行css代码可实现窗口位置水平垂直都居中*/
				position: absolute;
				left: 0; 
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='son'></div>
	</body>
</html>

4.多行文字垂直居中

如果是单行文本垂直居中,可以通过给元素的高度height和行高line-height设置相同的值实现。

子盒子中如果有多行文本的话,实现垂直居中,效果如图2所示。

在上图中,主要用到的知识点是:

1.父元素 display: table;

2.子元素display: table-cell;

3.另外子元素还需要使用vertical-align: middle;

完整代码如下。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本垂直都居中</title>
		<style type="text/css">
			.box{
				width: 1200px;
				height: 400px;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;      /*	.box水平居中*/
				overflow: hidden;
			}
			.father {
				display: table; 				/*1设置display为table*/
				background: #f5f5f5;
				width: 360px;
			}
			.son {
				width: 160px;
				display: table-cell;				/*2设置display为table-cell*/
				vertical-align: middle;  		/*3垂直方向设置为middle*/
				text-align: center;
			}
		</style>
	</head>
	<div class='box'>
		<div class='father'>
			<div class='son'>
				给父元素div设置display:table,子元素p设置display:table-cell,再加上一个vertical-align:middle,不论内容有多少,不论行高是多少,总之都会整体垂直居中
			</div>
		</div>
		<div class='father'>
			<div class='son'>
				子元素p设置display:table-cell,再加上一个vertical-align:middle,不论内容有多少,不论行高是多少,总之都会整体垂直居中
			</div>
		</div>
		<div class='father'>
			<div class='son'>
				给父元素div设置display:table,子元素p设置display:table-cell,再加上一个vertical-align:middle,不论内容有多少,不论行高是多少,总之都会整体垂直居中
			</div>
		</div>
	</div>
</html>
相关推荐
软件技术NINI5 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_96 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
weixin_ab9 小时前
【HTML分离术】
前端·html
struggle202512 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
朝阳3914 小时前
CSS【实战】可编辑元素实现 placeholder -- contenteditable=“true“
css
咚咚咚小柒15 小时前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang15 小时前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
Hello123网站17 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
fox_19 小时前
CSS3:水平垂直居中的 N 种实现方法
css
超能996要躺平19 小时前
用三行 CSS 实现任意多列等分布局:深入掌握 Grid 的 repeat() 与 gap
前端·css