div内容垂直居中对齐

最新推荐文章于 2024-05-30 22:05:00 发布
最新推荐文章于 2024-05-30 22:05:00 发布
阅读量7.4k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： div 垂直居中 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ale2012/article/details/50976507
版权

css垂直居中属性设置vertical-align: middle对div不起作用，例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {text-align: center; vertical-align: middle;}
.outer {
	width: 400px;
	height: 120px;
	position: relative;
	left: 20px;
	top: 20px;
	text-align: center;
	vertical-align: middle;
	border: 1px dashed blue;
}

.button {
	width: 200px;
	height: 40px;
}
</style>
</head>
<body>
	<div class='outer'>
		<button class='button'>在DIV中垂直居中</button>
	</div>
</body>
</html>

运行后按钮没有在DIV中垂直居中

解决思路：如果div和按钮的宽高都确定为具体像素值，可以直接设定按钮的css属性：position：relative; top为(div.height - button.height)/2，left为(div.width-button.height)/2；否则给按钮添加一个div父元素，宽高和按钮相同，position设定为relative，top和left都为50%（即左上角位置设定在外层div的中心），再将按钮左上角位置坐标设定为父元素div宽高（也等于按钮自身宽高）的-50%

详细代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {text-align: center; vertical-align: middle;}
.outer {
	width: 400px;/* 或者为百分比 */
	height: 120px;
	position: relative;
	left: 20px;
	top: 20px;
	border: 1px dashed blue;
}

.inner {
	width: 200px;
	height: 40px;
	position: relative;
	position: relative;
	top: 50%;
	left: 50%;
}

.button {
	width: 200px;
	height: 40px;
	position: relative;
	top: -50%;
	left: -50%;
}
</style>
</head>
<body>
	<div class='outer'>
		<div class='inner'>
			<button class='button'>在DIV中垂直居中</button>
		</div>
	</div>
</body>
</html>

再次运行后，div中按钮上下居中显示

END


MySomeday
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV和SPAN垂直居中对齐的实现方法
09-25
DIV和SPAN如何垂直居中对齐，水平居中很简单，设置text-align:center就可以了，垂直居中一直很是疑惑，下面为大家解惑
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 4304
如何将div垂直水平居中？7个小妙招
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..
如何使用 CSS 在 DIV 元素中垂直居中对齐文本
最新发布
qq_25153359的博客
05-30 278
的 div 元素，并且您在 div 内放置了一些要垂直居中对齐的链接。最简单的方法是 — 只需应用值等于 div 高度的。的值，则差异（称为"领先"）被削减一半并均匀分布 在内联框的顶部和底部，将内联元素与元素垂直居中对齐。将 div 内的文本垂直居中对齐，您将不会成功。这个技巧背后的概念是，如果一个元素的。如果您尝试使用 CSS 规则。
如何实现一个div垂直居中（至少3种方法）
yf18040578780的博客
09-11 4175
如何实现一个div垂直居中（至少3种方法）
解决div中元素垂直居中的五种方法
NananananA' township
07-12 6204
假设div的高度为200px，字体大小为20px 方法一：利用padding内边距 我要垂直居中 .type1{ border: 1px solid blue; font-size: 20px; padding: 90px 0; line-height: 1; } 注意此时不用设置div的高度height：200p
将一个绝对定位的div水平垂直居中对齐
12-13
在通常情况下，可以为元素添加margin:0px auto即可让元素在它的父元素水平居中，然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效，所以说还是要用老办法实现。 代码示例如下:...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
div水平垂直居中的完美解决方案
09-25
本文主要探讨的是如何使用CSS来实现`div`元素的水平和垂直居中。我们将通过两种不同的方法来详细讲解这一主题。 首先，我们来看一种简单的方法，即实现水平居中。通过设置`div`的`margin`属性，可以轻松地使其在父...
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
div文字垂直居中的方法有哪些？
qq_27009517的博客
05-14 1万+
首先我们应该知道文字的水平居中比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了，所以我们就来具体看看div文字垂直居中的几种实现方法。 1、vertical-align属性让文字居中 vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个...
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
让div水平垂直居中的六种方法
一只琪琪子的博客
09-04 6032
** 方法一：绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） ** ** 方法二：绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。 ** ** 方法三：绝对定位方法：绝对定位下top left right bottom 都设...
html中两个div垂直居中对齐,在div中垂直居中的两个元素
weixin_39853155的博客
06-09 1643
如何对元素进行垂直、水平或两者的居中这里有两种在div中对div进行中心化的方法。一种使用CSS的方法另一种方式是使用CSS工作台和定位财产。在这两种情况下，居中的div的高度都可以是可变的、未定义的、未知的。中心点的高度并不重要。以下是两者的HTML：DIV#1DIV#2CSS Flexbox方法#container{display:flex;/*estab...
CSS进阶篇--div中的内容垂直居中的五种方法
weixin_34007879的博客
09-14 602
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（pa...
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; }
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2454
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
css中文本内容垂直居中对齐
03-23
可以使用CSS的flex布局来实现文本内容的垂直居中对齐，具体代码如下： HTML代码： ``` <div class="container"> <p class="text">这是一段文本内容</p> </div> ``` CSS代码： ``` .container { display: flex; align-items: center; justify-content: center; height: 200px; } .text { text-align: center; } ``` 其中，通过设置容器的display属性为flex，再设置align-items和justify-content属性为center，可以实现容器内元素的垂直和水平居中对齐。同时，通过设置文本的text-align属性为center，可以实现文本内容的水平居中对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值