CSS实现水平垂直居中的6种方式
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。
作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。
在开发中经常需要实现的一个页面效果是:元素的垂直居中。
在此记录一下,经常使用的几种方法。
前提:元素之间的布局关系如下,需要实现son元素的垂直居中
<style>
.son {width: 200px;height: 200px;background-color: pink;}
</style>
<div class="parent"><div class="son"></div>
</div>
方法1:使用绝对定位 + transform,给子元素添加如下样式
这种方式比较常用,父子元素都不确定宽高的情况也适用。
如果子元素的宽高确定的话,translate中的值也可以设置为子元素宽高的一半,即transform: translate(-100px, -100px);
.work {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
方法2:使用绝对定位 + margin,给子元素添加如下样式
这种方式适合子元素宽高确定的情况,给margin-top设置百分比的大小将不生效,即margin-top: -50%;不能达到垂直居中的效果
.work1 {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;
}
方法3:使用绝对定位 + margin: auto,给子元素添加如下样式
父子元素宽高都未知时也适用。
.work2 {position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin:auto;
}
方法4:父元素使用flex布局,并设置相关的属性值为center
这种方式要求父元素的高度是确定的,百分比形式的高度将不能生效。
有关flex布局的使用可以参考阮一峰老师的文章Flex布局教程
.par-work {height: 100vh;display:flex;justify-content:center;align-items:center;
}
方法5:使用table-cell实现
这种方式需要父元素的宽高都是确定的,才能保证子元素在父元素中垂直水平都居中。
.par-work2 {height: 500px;width: 500px;display: table-cell;vertical-align: middle;text-align: center;
}
.son-work2 {display: inline-block;
}
方法6:使用grid布局
这种方式适用于父元素高度确定的情况,有关gird布局的使用可以参考阮一峰老师的文章CSS Grid布局教程
.par-work3 {display: grid;height: 500px;
}
.son-work3 {align-self: center; /*设置单元格内容的垂直位置*/justify-self: center; /*设置单元格内容的水平位置*/
}
多有参考网上的其他的方案,仅以此记录一下,方便后续查找使用。
❤️欢迎素质三连[点赞 + 收藏 + 评论]
我是小梅,有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知,一起沟通、学习成长呀。
CSS实现水平垂直居中的6种方式相关推荐
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
- CSS实现水平垂直居中的几种方式
1.最简单 margin: 0 auto line-height等于height .outer {width: 200px;padding: 200px;background-color: pink; ...
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- 水平垂直居中的几种方式
文章目录 水平垂直居中 一.实现水平垂直居中的方式 二.具体实现 元素定宽高 利用定位 + calc 利用定位 + margin:负值 元素不定宽高 利用定位 + margin:auto 利用定位 + ...
- HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动 水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
- CSS实现水平垂直居中的五种方法
前言 今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
- CSS常用水平垂直居中的几种方法
CSS水平垂直居中 一.利用margin:auto 二.利用position: absolute 三.弹性盒子 四.利用水平对齐和行高 五.grid 为方便理解,欢迎查看线上效果,在线试一试 一.利用 ...
最新文章
- 物联网通信协议全解析
- WebBrowser控件参数解释
- Hex与float之间相互转换
- Centos7 Git源码安装
- !--[if IE 9] ![endif]--
- 一键刷入twrp_小米/红米手机到手了该怎么解锁和刷 twrp
- 【数据结构和算法笔记】递归详解(附题)
- c#之new关键词——隐藏基类方法
- linux 驱动 printk 输出变量格式
- excel下拉速度太慢_全靠这些Excel、Word一键录入技巧,我才能用10分钟完成3小时工作...
- 【大数据科普系列之二】大数据运维工程师
- html5 自动失去焦点,js input失去焦点事件
- 视频(图像)质量检测
- 微信小程序设置git提交、代码管理
- 网线品质差的三大影响
- SMARTY安装与使用
- linux ssd加速机械硬盘,关于linux:机械硬盘随机IO慢的超乎你的想象
- 如何共享服务器主机文件,服务器主机如何做文件共享
- S4 HANA BP 新增客商公司代码数据
- 简单常用日语汇总(转)
热门文章
- python coding ansi_使用Python把UTF8转ANSI编码
- 查找数组中的指定元素的位置--顺序查找与二分查找
- jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
- 【单片机毕业设计】【mcuclub-jj-052】基于单片机的电脑散热底座的设计
- 软件测试人员易遗漏的一些隐藏缺陷
- Truffle在ganache-cli部署合约
- 机器学习:模型评估与sklearn实现(三)_留一法与自助法(booststrapping)
- 天线发射功率计算公式_天线功率详细说明
- Tomcat 中 jsp 中文乱码显示处理解决方案
- php excel转html,如何将Excel文件转换为Html的详解(图)