水平垂直居中的方式

1、margin:0,auto

2、flex弹性布局

父元素设置display:flex;justify-content:center;algin-items:center;

3、父相子绝

父元素设置position:relative;子元素设置position:absolute;left:50%;top:50%;(最后移动自身的50%)transform:translate(-50%,-50%);

4、行内块

display:inline-block;text-algin:center;

5、网格布局

display: grid;place-items:center;

6、table布局

text-algin:center;vertical-algin:middle;

相关推荐
编程零零七3 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦5 小时前
JavaScript substring() 方法
前端
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_6 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋7 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120537 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢7 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写8 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
史努比.9 小时前
redis群集三种模式:主从复制、哨兵、集群
前端·bootstrap·html