div盒子水平垂直居中的几种方法

最新推荐文章于 2022-05-20 21:00:43 发布
最新推荐文章于 2022-05-20 21:00:43 发布
阅读量8.2k 收藏 14
点赞数 3
分类专栏： css html 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34200964/article/details/81711989
版权
css 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

一、盒子没有固定的宽和高

方案1、使用transforms属性的translate平移

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。 

<!DOCTYPE html>
<html>
<head>
	<title>my-test</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.content {
			padding: 20px;
			background: orange;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 5px;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

	</style>
</head>
<body>
	<div class="content">
		我不知道我的高度和宽度是多少。
	</div>
</body>
</html>

使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。

transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。

二、盒子有固定的宽和高

方案1、margin 负间距

1.必需知道该div的宽度和高度，

2.然后设置位置为绝对位置，

3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，

4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。

<!DOCTYPE html>
<html>
<head>
	<title>my-test</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.content {
			
			position: absolute;
			width: 200px;
			height: 200px;
			border: 2px solid red;
			background-color: yellow;
			left:50%;
			top:50%;
			margin-left:-102px;
			margin-top:-102px;
		}

	</style>
</head>
<body>
	<div class="content">
		我有固定的宽度和高度。
	</div>
</body>
</html>

方案2、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）

此方案代码关键点：

1、上下左右均0位置定位；

 2、margin: auto;

<!DOCTYPE html>
<html>
<head>
	<title>my-test</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.content {
			
			position: absolute;
			width: 200px;
			height: 200px;
			border: 2px solid red;
			background-color: yellow;

			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

	</style>
</head>
<body>
	<div class="content">
		我有固定的宽度和高度。
	</div>
</body>
</html>
小小程序员.
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div水平垂直居中的六种方法
weibaobao1314的博客
09-09 399
div水平垂直居中的六种方法 在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） 图片展示： 代码如下： div{ background:red; position: absolute; left:50%;
[css]盒子水平垂直居中的6种方法
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
div盒子水平垂直居中的方法
weixin_33948416的博客
09-01 219
这个问题比较老，方法比较多，各有优劣，着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上 top: 50%; left: 50%; 优点： 1.内容可变高度 2.代码量少 缺点...
css：盒子垂直水平居中的几种方法
热门推荐
5big的博客
02-28 1万+
方法1:宽度和高度已知的。 思路： 给父元素相对定位 给子元素绝对定位 left: 50%;top: 50%; margin-left: 负的宽度一半。 margin-top: 负的高度一半； &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;ti...
盒子居中方法
weixin_30244681的博客
04-16 223
布局中经常会遇到让一个盒子水平且垂直居中的情况，以下总结了几种居中方法： margin固定宽高居中 负margin居中 绝对定位居中 table-cell居中 flex居中 transform居中 不确定宽高居中（绝对定位百分数） button居中 不兼容IE低版本的可以用其他方法hack。 不多说，直接上代码： 大多数方法的html都相同，所以写一个了，不同的再单独写出来。 （de...
div垂直居中的方法
小怪兽
03-09 350
方法一：margin:auto法 定义上下左右为0，margin:auto，实现脱离文档流的居中 //css .div1 { position: relative; width: 200px; height: 200px; border: 3px solid forestgreen; margin-bottom: 20px; } .div2 { ...
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1359
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
一个盒子垂直水平居中的几种方法
qq_43692768的博客
11-01 1831
一个盒子垂直水平居中的几种方法总结 效果展示： HTML代码： <div id="container"> <div id="box"></div> </div> css基本样式： #container { width: 100%; height: 600px; border: 1px solid black; } #box { width: 100px; height: 100px;
详解html的几种水平垂直居中的方式（基础）
12-29
所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <div class=Centered1> <p>d第一种 </div> <!-css样式部分--> .Centered1{ ...
div 垂直居中的多种方法详细介绍
09-25
接下来，我们将详细介绍几种实现`div`垂直居中的方法。 首先，针对单行文本的垂直居中，可以通过设置`height`和`line-height`属性实现。当两者值相等时，文本行将垂直居中于容器内。例如，设置`div`的`height`和`...
div垂直居中的N种方法
11-02
div垂直居中的N种方法，div垂直居中的N种方法
使一个div盒子垂直水平居中的几种处理方法
DaXiong1024的博客
08-11 300
方法一： 如果盒子有宽高 div{ width:200px; height：200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px } 方法二： 父元素有高度的情况下并且只有一个div子元素 div（父元素div）{ ​ display:flex; ​ justify-content:center; ​ align-items:center } 方法三： 父元
你不得不知道的使一个盒子水平垂直居中的五种方法
weixin_57396733的博客
05-06 233
1.需求 初始代码及盒子效果 2.方法一：利用定位 子绝父相 子盒子定位(距父盒子宽度、高度一半的位置)，然后再移动自身宽度、高度的一半 3.方法二 利用transform 相当于是简化了方法一的margin-top:-50px;margin-left:-50px 4.方法三 手动计算父盒子与子盒子的空间距离 5.方法四 利用disply:flex 注意：在父盒子中设置，对子盒子生效，不要错给子盒子设置 6.方法五 利用margin:auto 7.方法六 利用d.
盒子水平垂直居中最实用四种方法
swag_12581的博客
05-20 2603
已知宽高的方法(使用定位) 1.子元素必须绝对定位 2.子元素四个方向的对立方向数值相同（都为0） 3.再给子元素加 margin:auto 可以让子元素在父元素中水平垂直居中 .login { width: 100px; height: 100px; /* 绝对定位 */ position: absolute; /* 四个方向都为0*/ top: 0; right: 0; bottom: 0; right: 0; ..
盒子垂直水平居中
梦是太匆
06-13 471
要设置内部盒子在外部盒子内垂直水平居中，可以有以下几种做法： 一、外部盒子与内部盒子都已知大小。 假设外部盒子为红色，大小为10em*10em；内部盒子为黄色，大小为3em*3em。在调整位置之前，盒子情况如下： 初始盒子 由于知道两个盒子的大小，只要设置黄盒子的位置即可，首先设置黄盒子的position为absolute，再将黄盒子向右下方偏移红盒子大小的一半，即向右偏移5em，向下...
css盒子垂直水平居中方法总结
qq_38086247的博客
06-09 320
经常使用到嵌套盒子居中的问题，使用使用弹性局部解决，使用使用比例，很多都用得初始熟。 设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知） 水平居中:在div的position为relative（相对定位时有效，绝对定位无效） //盒子相对父盒子水平居中 margin: 0px auto ; // 2、不知道盒子长宽：垂直水平居中：top、right、bottom、left全为0...
css的div垂直居中的方法,CSS使DIV内容垂直居中的方法
weixin_29323493的博客
08-04 930
使用DIV设计模仿Windows的弹出对话框，经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单，直接使用如下代码即可：div居中 在线演示 www.divcss5.combody{ text-align:center}.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}/* css注释：为了观...
盒子垂直居中的几种方法
qq_43072133的博客
06-13 573
盒子垂直居中的几种方法 一、盒子没有固定宽高时 方法一： .box{ padding: 20px; background: pink; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform:...
盒子水平垂直居中的方法
最新发布
07-27
有几种方法可以实现盒子水平垂直居中的效果，以下是其中一种常用的方法： 1. 使用 Flexbox 布局： ```html <div class="container"> <div class="box">内容</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 可根据需要设置盒子的高度 */ } .box { /* 可以根据需要设置盒子的样式，如宽度、高度、背景颜色等 */ } ``` 上述代码中，通过将父容器（`.container`）设置为 Flexbox 布局，并使用 `justify-content: center;` 和 `align-items: center;` 属性将子元素（`.box`）水平垂直居中。 2. 使用绝对定位和负边距： ```html <div class="container"> <div class="box">内容</div> </div> ``` ```css .container { position: relative; height: 100vh; /* 可根据需要设置盒子的高度 */ } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 可以根据需要设置盒子的样式，如宽度、高度、背景颜色等 */ } ``` 上述代码中，通过将父容器（`.container`）设置为相对定位，并将子元素（`.box`）设置为绝对定位，并使用 `top: 50%;`、`left: 50%;` 和 `transform: translate(-50%, -50%);` 将盒子水平垂直居中。 这只是其中两种实现方式，还有其他方法，如使用表格布局、使用 CSS Grid 布局等，可以根据具体情况选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值