实现div水平、垂直居中的几种方法

最新推荐文章于 2024-04-23 17:04:18 发布
最新推荐文章于 2024-04-23 17:04:18 发布
阅读量1.3w 收藏 8
点赞数 2
分类专栏： css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53908504
版权

1、最常用的，也是最简单的(利用position定位、再用margin偏移)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		body{
			background: #272822;
		}
		.test{
			position: absolute;
			top:50%;
			left:50%;
			width: 100px;
			height: 100px;
			margin:-50px 0 0 -50px;
			background: #27399a;
		}
	</style>
</head>
<body>
		<div class="test"></div>
</body>
</html>

2、利用css3新增属性弹性盒子align-items和justify-content（会存在一些兼容性问题，没关系，以后肯定会兼容的）

这种方法还有一个好处：就算不给里层容器定义宽高，也会根据文本内容自动居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		.bg{
			display: flex;
			width:500px;
			height: 500px;
			margin:0 auto;
			background: #272822;
			-webkit-align-items: center;
			align-items: center;
			justify-content: center;
		}
		.test{
			/*width: 100px;
			height: 100px;*/
			background: #27399a;
			color:#fff;
		}
	</style>
</head>
<body>

		<div class="bg">
			<div class="test">aaaaaaaaaaaaaa</div>
		</div>
		
</body>
</html>


3、这里扩充一下flex的盒子布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>实现div水平垂直居中</title>
	<style type="text/css">
		.bg{
			display: flex;
			width:500px;
			height: 500px;
			margin:0 auto;
			background: #272822;
			-webkit-align-items: center;
			align-items: center;
			justify-content: center;
		}

		.test{
			height: 100px;
			background: #27399a;
			margin-left: 10px;
		}

		.test:nth-child(1){
			flex:1;
		}
		.test:nth-child(2){
			flex:2;
			background: #a6e22e;
		}
		.test:nth-child(3){
			flex:1;
			background: #48beef;
			margin-right: 10px;
		}
		

	</style>
</head>
<body>

		<div class="bg">
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
		</div>
		
</body>
</html>


Take_Dream
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
div水平垂直居中的四种方式
qq_57443373的博客
09-08 3万+
让div水平居中的方式，我所知道的就是以下这四种。 文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
div文字垂直居中的方法有哪些？
qq_27009517的博客
05-14 1万+
首先我们应该知道文字的水平居中比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了，所以我们就来具体看看div文字垂直居中的几种实现方法。 1、vertical-align属性让文字居中 vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个...
vue实现水平排列且水平居中
最新发布
weixin_42966151的博客
04-23 862
【代码】vue实现水平排列且水平居中。
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
让div水平垂直居中的六种方法
一只琪琪子的博客
09-04 5992
** 方法一：绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） ** ** 方法二：绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。 ** ** 方法三：绝对定位方法：绝对定位下top left right bottom 都设...
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
CSS实现垂直居中的几种方法
12-13
有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一： 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: <div ...
让Div实现水平或垂直居中的相关方法
09-24
本文将详细介绍几种实现Div居中的方法，包括使用CSS和JavaScript的技巧。 首先，我们可以使用CSS来实现Div的居中。一种常见的方式是通过设置`margin`属性。例如，如果要让一个具有固定宽度的Div水平居中，可以添加...
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...
css 垂直居中的几种实现方法
09-25
以下将介绍几种常见的垂直居中实现方法。 1. 利用`position`和负边距 这种方法基于绝对定位，将元素的顶部与父元素的居中线对齐，然后通过`margin-top`属性将其向上移动自身高度的一半。基本的CSS代码如下： ```...
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
CSS进阶篇--div中的内容垂直居中的五种方法
weixin_34007879的博客
09-14 594
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（pa...
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2391
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
css 居中问题的总结
qq_43889848的博客
05-15 2230
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
如何实现一个div垂直居中（至少3种方法）
yf18040578780的博客
09-11 4077
如何实现一个div垂直居中（至少3种方法）
如何将div中的内容垂直居中
qq_40603010的博客
09-23 5580
如何将div中的内容垂直居中 第一种方法: 在div里面添加：text-align:center; line-height: 60px; 这里的line-height是行高，这个根据你的div的高度要调一下。 第二种方法: 就是改变div的属性，让其display属性为table-cell，我们知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性， 在div里面添加：display:table-cell; vertical-align: middle; 综上所述，将div
元素垂直居中水平居中的方法
MichaelAn的博客
11-18 282
元素和文本的居中在css中是入门的考察点。元素在盒子内部水平居中或者垂直居中，文本在盒子内部水平居中或者垂直居中都是很关键的考察点。加上移动端和PC端适配，就是基本的CSS考察点。在面试过程中这个是一个最基本的问题，需要每时每刻熟练记忆。好了，下面上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...
div 内容水平垂直居中方法
06-09
实现 div 内容的水平垂直居中可以使用多种方法，以下是其中的几种： 1. 使用 Flex 布局：将 div 的样式设置为 display: flex;，并设置 justify-content 和 align-items 属性为 center。 ```html <div style="display: flex; justify-content: center; align-items: center;"> <p>这是要水平垂直居中的内容</p> </div> ``` 2. 使用绝对定位和 transform 属性：将 div 的定位方式设置为 absolute，再使用 top, left, right, bottom 属性将其定位到父元素中心，最后使用 transform 属性将其自身向左上方偏移 50% 的距离。 ```html <div style="position: relative;"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> <p>这是要水平垂直居中的内容</p> </div> </div> ``` 3. 使用表格布局：将 div 的样式设置为 display: table;，再将其内部元素设置为 display: table-cell; 和 vertical-align: middle; 实现内容的垂直居中。 ```html <div style="display: table; width: 100%; height: 100%;"> <div style="display: table-cell; vertical-align: middle; text-align: center;"> <p>这是要水平垂直居中的内容</p> </div> </div> ``` 这些方法都可以实现 div 内容的水平垂直居中，具体可以根据实际情况选择使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值