div 中元素居中的N种常用方法

        本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全

        本文例子使用的 html body结构下的div 盒子模型如下:

<body>
	<div class="container">
		<div class="box"></div>
	</div>
</body>

         例子盒子居中效果都如下图:

注:当把div 盒子模型中子div换成其他块级元素,如<p>或<h1>~<h6>时,以下方法仍然奏效。但当把子div换成行内元素,如<span>时,第6,第7种方法将失效。

1、弹性布局 设置容器项目在横轴和纵轴上都居中对齐

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		
	.box{
		width: 120px;
		height: 120px;
		background: #55a9ff;
	}
</style>

 

2、弹性布局 设置容器项目 margin:auto

        该方法可以不设置容器项目横轴和纵轴的对齐方式,直接设置margin:auto即可2、弹性布局 设置容器项目 margin:auto

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		display: flex;
	}
		
	.box{
		width: 120px;
		height: 120px;
		margin: auto;
		background: #55a9ff;
	}
</style>

  

3、绝对定位法

        父div要使用其中一种定位方式:relative / absolute / sticky / fixed子div使用绝对定位,并使它的 top、left、right、bottom 都为0且margin:auto 即可

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		position: relative;
	}
			
	.box{
		width: 120px;
		height: 120px;
		position: absolute;
		background: #55a9ff;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
</style>
  • 绝对定位法还可以只设置top、bottom为0,实现只垂直居中
<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		position: relative;
	}
			
	.box{
		width: 100px;
		height: 100px;
		position: absolute;
		background: #55a9ff;
		top: 0;
		bottom: 0;
		margin: auto;
	}
</style>

  •  同理可以只设置left、right为0,实现只水平居中 

4、transform居中法

        使用 transform 可以不用管子div自身的宽高,但要设置父子div的position属性,可都设置成 relative / absolute,此方法IE9 以下不支持

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		position: relative;
	}
			
	.box{
		width: 120px;
		height: 120px;
		position: absolute;
		background: #55a9ff;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}	
</style>

5、负margin居中

        利用子div 负的margin来进行居中,此方法要知道子div固定的宽高,且margin-top、margin-left 要是子div 自身宽高负的一半值

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		position: relative;
	}
			
	.box{
		width: 120px;
		height: 120px;
		position: absolute;
		background: #55a9ff;
		top: 50%;
		left: 50%;
		margin-top: -60px;
		margin-left: -60px;
	}	
    /* 如果box的宽高都是100px,那margin-top和margin-left要是-50px */
</style>

6、margin固定宽高居中

        此方法要知道父子div的宽高,且要算出子div的margin 的高度和宽度 恰好在父div居中

该方法把子div换成行内元素,如<span>时将会失效

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
	}
			
	.box{
		width: 120px;
		height: 120px;
		background: #55a9ff;
		margin: 90px 90px;
	}
	/* 如果 box 的宽高都是 100px,那么 margin: 100px 100px; */
</style>

7、table-cell居中

        此方法是将父div转换成表格单元格显示,然后使用垂直居中并且子div左右margin auto实现,该方法把子div换成行内元素,如<span>时将会失效

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		display: table-cell;
		vertical-align: middle;
	}
			
	.box{
		width: 120px;
		height: 120px;
		background: #55a9ff;
		margin: 0 auto;				/* 不能省 */
	}
</style>

8、不确定宽高居中(绝对定位百分数)

        此方法不设置子div的宽高,其宽高根据设置占用父div的比例来算,left和right的百分数一样就可以实现水平居中,top和bottom的百分数一样就可以实现垂直居中。其中子div要设置成绝对定位,父div 要设置成 relative / absolute / fixed / sticky

<style>
	.container{
		height: 300px;
		width: 300px;
		border: 1px solid black;
		background-color: aliceblue;
		position: relative;
	}
			
	.box{
		position: absolute;
		background: #55a9ff;
		top: 25%;
		left: 25%;
		right: 25%;
		bottom: 25%;
		margin: auto;
	}
    /* top / left / right / bottom 设置的比例不一样,box 的宽高将会随之变大或变小*/
</style>

以上方法如有错误请各位不吝指教,如以后有别的方法将会往下继续添加,各位有其他方法可留言告知。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端跨域的原因以及解决方案(vue),一文让你真正理解跨域

跨域这个问题,可以说是前端的必需了解的,但是多少人是知其然不知所以然呢&#xff1f; 下面我们来梳理一下vue解决跨域的思路。 什么情况会跨域&#xff1f; ​ 跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点&#xff1a;协议相同、域名…

C语言 棱形图案

目录 一、问题分析 上部分&#xff1a; 下部分&#xff1a; 二、代码演示 一、问题分析 如上图所示&#xff0c;我们可以将棱形进行拆解&#xff0c;分为上下两个部分。 上部分&#xff1a; 通过观察&#xff0c;我们得到 单边空格数 上半部分总行数 - 行数 - 1 …

金蝶软件实现导入Excel数据分录行信息到单据体分录行中

>>>适合KIS云专业版V16.0|KIS云旗舰版V7.0|K/3 WISE 14.0等版本<<< 金蝶软件中实现[导入Excel数据业务分录行]信息到[金蝶单据体分录]中,在采购订单|采购入库单|销售订单|销售出库单等类型单据中,以少量的必要字段在excel表格中按模板填列好,很方便快捷地从…

dingding机器人

“自定义机器人”只支持消息发送&#xff0c;自动回复需要“企业内部机器人” 消息发送 import requests import jsonres requests.post(https://oapi.dingtalk.com/robot/send?access_token036a339axxx,data json.dumps({"text": {"content":"h…

DAY04_SpringMVC—SpringMVC简介PostMan和ApiFox工具使用SpringMVC请求与响应REST风格

目录 一 SpringMVC简介1 SpringMVC概述问题导入1.1 SpringMVC概述 2 入门案例问题导入2.0 回顾Servlet技术开发web程序流程2.1 使用SpringMVC技术开发web程序流程2.2 代码实现【第一步】创建web工程&#xff08;Maven结构&#xff09;【第二步】设置tomcat服务器&#xff0c;加…

ssm+vue网上花店设计源码和论文

ssmvue网上花店设计源码和论文017 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xf…

分割等和子集——力扣416

思路:动态规划 bool canPartition(vector<int>& nums){int n=nums.size(

使用AffNet和HardNet进行图像匹配

一、说明 我们有一个任务是找到与给定查询图像最匹配的图像。首先&#xff0c;我们在OpenCV中尝试了使用SIFT描述符和基于Flann的匹配器的经典图像匹配。结果是完全错误的。然后是词袋...最后&#xff0c;找到了AffNet和HardNet。 二、关于AffNet和HardNet 本文专门介绍如何进…

【C++初阶】string类的常见基本使用

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

zabbix自动注册服务器以及部署代理服务器

文章目录 Zabbix自动注册服务器及部署代理服务器一.zabbix自动注册1.什么是自动注册2.环境准备3.zabbix客户端配置4.在 Web 页面配置自动注册5.验证自动注册 二.部署 zabbix 代理服务器1.分布式监控的作用&#xff1a;2.环境部署3.代理服务器配置4.客户端配置5.web页面配置5.1 …

Opencv-C++笔记 (17) : 模板匹配

文章目录 1--概念2-- 方法3 结果3.1 ROI区域的获取使用自适应目标匹配 1–概念 opencv 提供了一个专门用于模板匹配的函数 cv::matchTemplate();其调用方式如下&#xff1a; void cv::matchTemplate(cv::InputArray image, // 用于搜索的输入图像, 8U 或 32F, 大小 W-Hcv::Inpu…

LabVIEW使用图像处理进行交通控制性能分析

LabVIEW使用图像处理进行交通控制性能分析 采用普雷维特、拉普拉斯、索贝尔和任意的空间域方法对存储的图像进行边缘检测&#xff0c;并获取实时图像。然而&#xff0c;对四种不同空间域边缘检测方法的核的性能分析。 以前&#xff0c;空路图像存储在数据库中&#xff0c;道路…

drawio----输出pdf为图片大小无空白(图片插入论文)

自己在写论文插入图片时为了让论文图片放大不模糊&#xff0c;啥方法都试了&#xff0c;最后摸索出来这个。 自己手动画图的时候导出pdf总会出现自己的图片很小&#xff0c;pdf的白边很大如下如所示&#xff0c;插入论文的时候后虽然放大不会模糊&#xff0c;但是白边很大会显…

看完《孤注一掷》:原来这类人最容易被电信诈骗!

最近&#xff0c;你看了诈骗电影《孤注一掷》吗&#xff1f; “想成功先发疯&#xff0c;不顾一切向钱冲&#xff1b;拼一次富三代&#xff0c;拼命才能不失败&#xff1b;今天睡地板&#xff0c;明天当老板&#xff01;”诈骗工厂里的被骗去打黑工的人们一次次高呼着朗朗上口…

HTTPS 的加密流程

目录 一、HTTPS是什么&#xff1f; 二、为什么要加密 三、"加密" 是什么 四、HTTPS 的工作过程 1.对称加密 2.非对称加密 3.中间人攻击 4.证书 总结 一、HTTPS是什么&#xff1f; HTTPS (Hyper Text Transfer Protocol Secure) 是基于 HTTP 协议之上的安全协议&…

c语言——拷贝数组

这段代码是一个简单的数组拷贝示例。它的功能是将一个原始数组 original 的内容拷贝到另一个数组 copied 中&#xff0c;并输出两个数组的元素。 代码执行过程如下&#xff1a; 首先&#xff0c;在 main() 函数中定义了一个整型数组 original&#xff0c;并初始化了它的元素。…

【java毕业设计】基于SSM+MySql的人才公寓管理系统设计与实现(程序源码)--人才公寓管理系统

基于SSMMySql的人才公寓管理系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于SSMMySql的人才公寓管理系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及论文的获取方式。更多毕业…

shell脚本之正则表达式

目录 一.常见的管道命令1.1sort命令1.2uniq命令1.3tr命令1.4cut命令1.5实例1.5.1统计当前主机连接状态1.5.2统计当前主机数 二.正则表达式2.1正则表达式的定义2.2常见元字符&#xff08;支持的工具&#xff1a;find&#xff0c;grep&#xff0c;egrep&#xff0c;sed和awk&…

23.8.16日总结

原先写的评论是每级评论用缩进来区分&#xff0c;所以最多设置的是九级评论&#xff0c;修改了排版和格式&#xff1a; 还有管理员页面&#xff0c;查看文章时可以进行点赞&#xff0c;收藏的操作&#xff0c;现在进行了修改&#xff0c;将相关操作隐藏。 还有点击查看未发布…