不设宽高垂直居中

原创

qq62581587d2bea 2022-04-20 16:47:47 博主文章分类：css ©著作权

文章标签 其他 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者qq62581587d2bea的原创作品，请联系作者获取转载授权，否则将追究法律责任

第一种

.div{

position: absolute;

top: 50%;

left: 50%;

z-index: 3;

transform: translate(-50%,-50%);

}

第二种：

.div{

justify-content: center;

align-items: center;

display: -webkit-flex;

}

第三种：

.div{

　　display:absolute;

　　left:50%;

　　top:50%;

　　margin-left:-width/2;//负向偏移宽度的一半，如果width不定，需要动态获取。

　　margin-top:-height/2;//原理同上

}

下一篇：阻止事件

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

【HarmonyOS】如何获取屏幕宽高&父容器的宽高

【关键字】HarmonyOS、屏幕宽高、父容器宽高、组件通用信息、组件标识1、写在前面在鸿蒙应用开发的过程中，需要用到屏幕的宽高，那么我们该如何获取手机屏幕的宽度和高度呢？另外，某个组件的父容器的宽高我们能不能获取到呢？带着这些问题，通过查找相关资料，结合实际的代码进行测试，顺利的获取到了屏幕宽高和父组件的宽高，下面一起来看一下具体该如何实现吧。2、解决方案首先是获取屏幕宽高，它的实现较为简单，直

宽高屏幕宽高 Text
CSS设置水平垂直居中的7种方法

CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中,这篇文章主要为大家整理了常用的7种方法，感兴趣的小伙伴可以跟随小编一起学习一下CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。以下是一些常见方法及代码示例：1. 水平居中 - 文本或行内元素使用 text-align 属性123.parent {tex

垂直居中 HTML CSS
正则表达式4种零宽断言

(?=pattern) 零宽正向先行断言（ero-width positive lookahead assertion），正向往后查找(?!pattern) 零宽负向先行断言（zero-width negative lookahead assertion），负向往前查找(?<=pattern) 零宽正向后行断言（zero-width positive lookbehi

正则表达式正则零宽断言场景反选
宽高不确定，垂直居中

>div { width: 60%; height: 0; // 设置高为0，让padding撑起高 padding-bottom: 60%; /* 让div的高等于宽 */ border-radius: 50%;

垂直
div不定宽高，文字垂直居中

div不定宽高，文字垂直居中

css html css3
不定宽高元素的水平垂直居中 css

top: 50%; left: 50%; transform: translate(-50%,-50%);

CSS
如何不设置宽高的div垂直居中

如何不设置宽高的div垂直居中

css html 前端
前端不定宽高的水平垂直居中方案

.myoff-wrapper{ position:absolute; top:50%; left:50%; z-index:3; -webkit-transform:translate(-50%,-50%); border-radius:6px; background:#fff;}flexbox版.parent{ justify-content:center; //子元素水平居中 align-items:center; // 子元素垂直居中 display:-webkit-fl

前端不定宽高的水平垂直居中方案编程
关于补丁宽高图片全屏垂直居中显示的问题

不定宽高的图片全屏水平垂直居中显示

水平垂直不定宽高图片全屏
如何让一个不固定高宽的图片，垂直和水平居中在页面中间？

问:如何让一个不固定高宽的图片，垂直和水平居中在页面中间？目前的解决办法：<div class="pannel"> <div class="ot"> <img src="http://www.wanggouchao.com/data/upload/c

图片 absolute relative position border
css已知宽高和未知宽高的居中定位

1、已知宽高上图中我们想要对已知宽度的“服务范围”进行左们知道整体的宽度，所以我们可以直接采用在向左移动宽度的一半，也就是margin

块级元素垂直居中宽高
子控件：水平居中，垂直居中，水平垂直居中

.center { display: flex; justify-content: center; align-items: center;}.horizontal-center { display: flex; justify-content: center;}.vertical-center { display: flex; align-items: ...

开发
不固定高宽 div 垂直居中的方法

1.方法一：伪元素和 inline-block / vertical-align（兼容 IE8） .box-wrap{ text-align: center } .box-wrap:before { content: ''; display: inline-block; height: 100%; ...

不兼容宽高伪元素 5e
彻底搞懂水平垂直居中布局（定宽高和不定宽高）

这是面试常问的题目。今天就来彻底搞明白水平垂直居中的方法一共七种方法，前两种是定宽高才能用的，后面五种不管需要垂直居中的元素有没有宽高都可以垂直居中。flex和table-cell和grid都需要有父元素的宽高，也就是说不能直接在body中水平垂直居中。 <body> <div class="co ...

宽高绝对定位水平垂直居中垂直居中
CSS 不定宽高的垂直水平居中方式总汇

垂直居中，在 css 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 css3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中

伪元素父级元素 css 手机端网格布局
未知宽高div水平垂直居中3种方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body>  <div style="position:relative;width:100%;height:600

微信开发 css html 水平垂直居中开发人员
【居中】垂直居中

垂直居中的几种实现方法 content 纯CSS实现未知尺寸图片垂直居中

html 垂直居中 css
javascript 垂直居中垂直居中css

因为工作中有用到，所以找了几种。HTML结构如下<body><div class="Absolute-Center"></div></body>CSS样式如下1、body { height: 100%; width: 100%;}.Absolute-Center { background-color: green

javascript 垂直居中垂直居中 css HTML
【CSS】居中元素定宽高，居中元素不定宽高（待续）

居中元素定宽高 abosolute + 负 margin 元素偏移后，再修正元素自身宽高的一半，及可实现剧中显 CSS .wp { border: 1px solid red; width: 300px; height: 300px; position: relative; } .box { bac ...

CSS css 宽高 html Python
一个未知宽高的元素在div中垂直水平居中

<body> <div id="#div1"> <img src="img1.png"></img> </div> </body> 那么，如何让img元素在div中居中对齐呢？第一种方法第一步：在img标签后面添加一个元素，比如说添加一个span元素 <body> <div id="div1">

css3 垂直居中块元素新特性
Python pyc文件制作

Python是一门解释型语言？没学Python前，一直以为Python是一门解释型语言，当学习是，发现了*.pyc文件的存在，才知道哪是一厢情愿了。如果Python是解释型语言，那么生成*.pyc文件是什么呢？C应该是compiled的缩写才对啊！下面看看一些基础概念。解释型语言和编译型语言计算机是不能够识别高级语言的，所以当我们运行一个高级语言程序的时候，就需要一个“翻译机”来从事把高级语言转变

Python pyc文件制作 Python Java 解释型语言
redis sentinel如果只剩下两台

redis各数据类型操作，建议收藏 keykeys *scan 0 match * count 1exists key 判断某个key是否存在move key db 当前库就没有了，到指定的库中去了expire key 为给定的key设置过期时间ttl key 查看还有多少时间过期 -1表示永不过期 -2表示已过期type key 查看key是什么类型1.stringstring是red

redis hash redis存储 redis命令 redis删除
flash建模仿真过程中报错memory corruption

单片机内存FLASH模拟EEPROM编程一，简述很多单片机本身是没有自带EEPROM，但是一般具有在应用编程（IAP：In Application Programming）功能，可以把它的内存FLASH当成EEPROM来使用。不同型号的单片机，其FLASH容量也有所不同，有的小点的内存只有16K字节，大点则可以达到了1024K字节。我们的主控板有灵动微(32K/512k)和新唐(128k)两款，

嵌入式单片机 stm32 闪存数据
android 显示数学公式

极度公式是一款强大的跨平台专业 LaTeX 公式软件。支持公式字符编辑与录入、公式模板选择，对于重要公式支持云备份。也可以手机端(安卓)拍照桌面端编辑(Windows、Mac)等实用功能。化繁为简，助您更高效率办公！将手写公式或纸张上的公式，输出复制到剪贴板，这些输出可以轻松粘贴到 LaTeX 编辑器中，如 Overleaf、标记编辑器(如 Typora、Microsoft Word 等)等。支持

android 显示数学公式 excel公式编辑器 latex大括号多行公式 typora 公式对齐数学公式
尚硅谷 springboot3学习笔记

计算机的两位先驱： 1、图灵人工智能之父 2、冯诺依曼现代计算机之父计算机的组成一、软件：分为系统软件和应用软件系统软件：windows、mac、linux、harmony 应用软件：下载的软件如微信二、硬件： ①中央处理器（cpu）就是控制器和运算器 ②存储器，包括内存和硬盘内存：临时性存储，读写速度快，常见的有16/32G。能同时玩多少游戏，取决于内存的大小。硬盘：永久性存储，一

尚硅谷 springboot3学习笔记 html 笔记前端 HTML5

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯