元素水平垂直居中的方法

元素水平垂直居中的方法

不知道元素宽高大小仍能实现水平垂直居中的方法

  • 利用定位+margin:auto
  • 利用定位+transform
  • flex弹性布局
  • grid网格布局

利用定位+margin:auto

css 复制代码
<style>
.father{
	width:500px;
	height:300px;
	border:1px solid #0a3b98;
	position: relative;
}
.son{
	width:100px;
	height:40px;
	background: #f0a238;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}
</style>
html 复制代码
</style>
<div class="father">
	<div class="son"></div>
</div>

利用定位+transform

css 复制代码
<style>
.father {
	position: relative;
	width: 200px;
	height: 200px;
	background: skyblue;
}
.son {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: red;
}
</style>
html 复制代码
<div class="father">
	<div class="son"></div>
</div>

flex弹性布局

css 复制代码
<style>
.father {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	background: skyblue;
}
.son {
	width: 100px;
	height: 100px;
	background: red;
}
</style>
html 复制代码
<div class="father">
	<div class="son"></div>
</div>

grid网格布局

css 复制代码
<style>
.father {
	display: grid;
	align-items:center;
	justify-content: center;
	width: 200px;
	height: 200px;
	background: skyblue;
}
.son {
	width: 10px;
	height: 10px;
	border: 1px solid red
}
</style>
html 复制代码
<div class="father">
	<div class="son"></div>
</div>

内联元素居中布局

水平居中

  • 行内元素可设置:text-align: center
  • flex布局设置父元素:display: flex; justify-content: center

垂直居中

  • 单行⽂本父元素确认⾼度:height === line-height
  • 多行⽂本父元素确认⾼度:display: table-cell; vertical-align: middle

块级元素居中布局

水平居中

  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负自身⼀半

垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高,不定宽)
  • grid(不定高,不定宽),兼容性相对⽐较差
相关推荐
烛阴36 分钟前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript