CSS常见的四种垂直居中的方法

面试中不管是笔试题还是面试题,一般很容易被问到如何实现垂直水平居中,这里总结四种方法作为参考

(1)margin:auto法

css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

(2)margin负值法

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;

margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/

}

补充:其实这里也可以将marin-top和margin-left负值替换成,
transform:translateX(-50%)和transform:translateY(-50%)

(3)table-cell(未脱离文档流的)

设置父元素的display:table-cell,并且vertical-al

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/358349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下切换Python2和Python3的4种方法

本篇博文面向Linux用户&#xff0c;在Linux下(Ubuntu)下测试通过&#xff0c;Win用户嘛&#xff0c;…… 0x00 为什么需要有两个版本的Python Python2和Python3不兼容是每个接触过Python的开发者都知道的事&#xff0c;虽说Python3是未来&#xff0c;但是仍然有很多项目采用P…

异步EJB只是一个Gi头吗?

在之前的文章&#xff08; 此处和此处 &#xff09;中&#xff0c;我展示了当服务器负载沉重时&#xff0c;创建非阻塞异步应用程序可以提高性能。 EJB 3.1引入了Asynchronous批注&#xff0c;用于指定方法将在将来的某个时间返回其结果。 Javadocs声明必须返回void或Future 。…

常见的清除浮动的五种解决办法

方法一:使用带clear属性的空元素 在浮动元素后使用一个空元素如 <div class="clear"></div> 并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> …

Kali环境下安装python3

Kali环境下安装python3 参考&#xff1a; 由于kali环境下是自动安装了python 2.7&#xff0c;没有python3以上的版本&#xff0c;现在开始安装python 1. 先下载python3的tar包 进入这个目录&#xff1a; cd /usr/local/ 创建一个新文件夹python3&#xff1a; mkdir /usr/loc…

用汇编语言写的第一个DOS程序

今天整理电脑时&#xff0c;看到两三年前学习汇编语言时写的显示“Hello”的程序。不禁感叹那个时候学得如此用心&#xff0c;同样的功能&#xff0c;我竟然用了四种写法。现贴出源码&#xff0c;为了以后继续学习&#xff0c;也为了给初学者一点启发。(删掉注释了&#xff0c;…

对安卓应用进行加固签名,为上架各大应用市场做准备

上架安卓各大应用市场之前需要对自己的应用进行签名加固&#xff0c;签名是为了证明你是这个应用的开发者&#xff0c;软著也是一种方式&#xff0c;这是不做介绍&#xff0c;加固是为了从安全角度给安装包加一个保护层&#xff0c;防止被恶意破解及攻击。下面简单介绍一下签名…

ADO.Net 事务操作

DbTransaction转载于:https://www.cnblogs.com/lxf1117/p/4773742.html

docker安装pocbox(漏洞测试验证辅助平台)

PoCBox - 漏洞测试验证辅助平台 开发这个平台的初衷是帮助自己在漏洞挖掘测试中更加方便快捷的辅助自己进行漏洞验证。 一开始的想法是框架化、模块化&#xff0c;但是开发着开发着就发现有点累&#xff0c;于是采用了原始的方法去开发&#xff1a;原生JavaScriptPHP。 PoCBo…

内存映射获取行数_使用内存映射文件获取巨大的矩阵

内存映射获取行数总览 矩阵可能真的很大&#xff0c;有时甚至比您可以容纳在一个数组中的要大。 您可以通过具有多个数组来扩展最大大小&#xff0c;但这会使堆大小确实很大且效率低下。 一种替代方法是在内存映射文件上使用包装器。 内存映射文件的优点是它们对堆的影响很小&a…

大前端最强vscode教程(基础篇)

这段时间入职了一家外包公司的前端工程师岗位,前端编辑器用起来,前端一般会用到几个编译器,VScode、sublime text3、webstorm、Hbuid等,这里主要介绍VScode. 初次使用vscode时各种不适应,所有需要用到的功能貌似都需要单独安装插件才能用。这让很多初次使用vscode的朋友有…

pdf转换成可编辑的word转换器

头条号&#xff1a;近期有不少网友向我咨询有关PDF转换成可编辑的Word文档的软件&#xff0c;小Q认为网上虽然有很多类似的PDF转换成Word转换器&#xff0c;但是从性能以及转换效果来看&#xff0c;迅捷PDF转换成Word转换器免费版v6.0算是比较理想的选择&#xff0c;有需要的童…

edusrc0day挖掘技巧

网瑞达web资源管理系统0day ps&#xff1a; 作为在edusrc的小白&#xff0c;经常看见大师傅们的刷屏&#xff0c;我也很向往能像大师们一样有一次刷屏的机会&#xff0c;于是有了这一次的渗透之旅。 思路&#xff1a;要想刷屏上分&#xff0c;就得找系统来挖掘&#xff0c;对…

通过NFS访问编年引擎

总览 编年史引擎是数据虚拟化层。 它抽象化了访问&#xff0c;操纵和订阅各种数据源的复杂性&#xff0c;因此该数据的用户无需知道实际存储数据的方式或位置。 这意味着该数据可以在系统之间迁移或以更有效的方式存储&#xff0c;但对于开发人员来说使用起来会很复杂。 基本接…

个人或者公司如何写版权认证的证明文件?

项目场景&#xff1a; 现在好多平台都在做知识付费&#xff0c;比如百度文库、CSDN、微博、头条、知乎等等&#xff0c;因此我想给大家做一些付费文档&#xff0c;想上传到百度文库的知识店铺 问题描述&#xff1a; 一般人不知道这个版权认证文件怎么写&#xff0c;怎么弄&am…

Bypass WAF实战总结

0X00前言 上个月刷了一波洞&#xff0c;然后这个月初远程支持了一个HW&#xff0c;在文件上传getshell的时候&#xff0c;碰到个各式各样的云waf&#xff0c;通过一个月的实战&#xff0c;总结了几个比较实用的技巧&#xff0c;文章总结的不全&#xff0c;只是基于我实战中用到…

Git教程学习总结(分享给热爱学习的你,团队的协作离不开你呀)

目录 Git 教程 Git 安装配置 Git 工作流程 Git 工作区、暂存区和版本库 Git 创建仓库 Git 基本操作 Git 分支管理 Git 查看提交历史 git log git blame Git 标签 Git 远程仓库(Github) Git Gitee Git 服务器搭建 Git 教程 Git 是一个开源的分布式版本控制系统&…

Linux的shell编写

-eq //等于 -ne //不等于 -gt //大于 -lt //小于 ge //大于等于 le //小于等于实验中遇到的问题&#xff1a; 1.NAMEuser1 中间不能有空格 2.[ xxx ] xxx前面和后面要有空格 任务1&#xff1a;使用case语句编…

rest spring_Spring的REST服务发现性,第5部分

rest spring这是关于使用Spring 3.1和Spring Security 3.1和基于Java的配置来建立安全的RESTful Web Service的系列文章的第五篇。 上一篇文章介绍了RESTful服务HATEOAS的可发现性的概念&#xff0c;然后介绍了一些由测试驱动的实际方案。 本文将重点介绍可发现性的实际实现以及…

为啥这么多程序员大佬学习Cortex-M3

Cortex-M3是一个32位处理器内核。内部的数据路径是32位的&#xff0c;寄存器是32位的&#xff0c;存储器接口也是32位的。CM3采用了哈佛结构&#xff0c;拥有独立的指令总线和数据总线&#xff0c;可以让取指与数据访问并行不悖。这样一来数据访问不再占用指令总线&#xff0c;…

Ffuf使用教程

kali安装教程链接&#xff1a;https://www.iculture.cc/cybersecurity/pig210 该工具用途广泛&#xff0c;可用于多种用途。一些用途&#xff1a; • 目录发现&#xff0c;可选择在 URL 中的任何位置进行模糊测试。 • 子域名发现 • 使用各种 HTTP 方法进行模糊测试。 安装 …