div垂直水平居中的几种方式

最新推荐文章于 2022-03-02 14:40:18 发布

柠檬红西柚

最新推荐文章于 2022-03-02 14:40:18 发布

阅读量141

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_37650418/article/details/106136955

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

布局如下

<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<body>
		<div id="parent" style="width: 300px;height: 300px;border: 1px solid #0000FF;">
			<div id="child" style="width: 100px;height: 100px;border: 1px solid #FF0000;"></div>
		</div>
	</body>
</html>

绝对定位

	#parent {
		position: relative;
	}
	#child {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

transform

	#child {
		margin: 0 auto; 
		position: relative;
		top: 50%;
		transform: translateY(-50%); /* 元素往下位移自身高度50%的距离 */ 
	}

弹性布局(flex)

	#parent {
		display: flex;/*设置为弹性容器，默认主轴为横轴*/
		align-items: center;/*交叉轴上如何对齐*/
		justify-content: center;/*在主轴上的对齐方式，这里为居中*/
	}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柠檬红西柚

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

qq_18294533的博客

01-01

601

css实现div水平垂直居中的几种方法一 . 给父div设置合适的padding二 . 通过position属性实现居中三 . 通过flex实现居中一 . 给父div设置合适的padding ##父div设置padding 二 . 通过position属性实现居中 1.设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; mar...

div水平垂直居中的六种方法

weibaobao1314的博客

09-09

400

div水平垂直居中的六种方法在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）图片展示：代码如下： div{ background:red; position: absolute; left:50%;

参与评论您还未登录，请先登录后发表或查看评论

div垂直居中的几种方法

永久的景专栏

04-27

654

1. 文字居中方式

CSS总结div中的内容垂直居中的五种方法

weixin_34342992的博客

09-14

3142

一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。二、内边距（padding）法另一种方法和行高法很相似，它...

div中的内容垂直居中的五种方法

夜空中最亮的星

06-19

1000

div中的内容垂直居中的五种方法一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 1 p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达

垂直居中div五种常用方式

空寻的博客

08-08

344

原创不易，求一键三连！！！ 1.运用absolute和calc垂直居中 <style> *{ padding: 0; margin: 0; } .demo{

div的水平垂直居中

cflsh的博客

11-20

241

div水平垂直居中的方法多种多样图示：下面展示一些内联代码片。 <body> <div id="parent"> <div id="child"></div> </div> </body> 方法一：使用flex布局 <style> * { margin: 0; padding: 0; }

css3 flex实现div内容水平垂直居中的几种方法

11-21

总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。

如何使div垂直水平居中的css代码

09-25

以下将详细讲解几种常用的技术来解决`div`垂直水平居中的问题。 1. **使用`margin`属性** 这是最简单且兼容性较好的方法。首先，在父级元素中设置`TEXT-ALIGN: center;`，这将使父级元素内的所有内联元素水平居中...

css实现div水平、垂直居中兼容chrome、ie8

09-25

要实现一个DIV元素在网页中水平和垂直居中，可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中，给出了几种不同的实现方式，其中一些兼容现代浏览器如Chrome，同时也兼容较...

CSS设置DIV垂直居中的N种方法兼容IE浏览器

09-27

以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...

div 垂直居中的多种方法详细介绍

12-13

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？... 相关教程：div水平居中的N种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要

让一个 div 水平垂直居中的七种方式

链珠的博客

03-25

535

1、单行文本垂直居中 <div id="parent"> <div id="child">child</div> </div> <style> #parent { background: blue; } #child { background: yellow; line-height: 200px; } </style> 2、垂直居中一张

Css实现垂直居中的几种方法

weixin_49693227的博客

02-15

204

Css实现垂直居中垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，方法1：绝对定位和负边距 .box3{position:relative;}.box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px;

div水平垂直居中的四种方式