元素的水平垂直居中

最新推荐文章于 2024-04-26 16:58:59 发布
最新推荐文章于 2024-04-26 16:58:59 发布
阅读量70 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/persist_xyz/article/details/87895356
版权 
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>水平垂直居中</title>
	<style>
		/*第一种*/
		/*.container{
			position: relative;
			width: 500px;
			height: 500px;
		}
		.center{
			width: 200px;
			height: 200px;
			background: #f00;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}*/


		/*第二种*/
		/*.container{
			position: relative;
			width: 500px;
			height: 500px;
		}
		.center{
			width: 200px;
			height: 200px;
			background: #f00;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
		}*/

		/*第三种*/
		/*.container{
			position: relative;
			width: 500px;
			height: 500px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.center{
			width: 200px;
			height: 200px;
			background: #f00;
		} */


		
		/*第四种*/
		/*.container{
			position: relative;
			width: 500px;
			height: 500px;
		}
		.center{
			width: 200px;
			height: 200px;
			background: #f00;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}*/

 
		/*第五种*/
		.container{
			width: 500px;
			height: 500px;
			background: #eee;
			text-align: center;
		}
		.center{
			display: inline-block;
			vertical-align: middle;
		}
		.container::after{
			display: inline-block;
			vertical-align: middle;
			content: '';
			height: 100%;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="center">test</div>
	</div>
</body>
persist_xyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
元素水平垂直居中的几种方法
01-20
多的不说，咋们直接进入正题 纯用margin是做不到的 在这里插入代码片 Document #box1{ width:300px; height: 300px; border:1px black solid;} #box2{ width:100px; height:100px; background:red;...
元素水平垂直居中的方法
JJ_Smilewang的博客
04-21 4708
我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。 1.行内元素水平垂直居中的方法 1.1 水平居中 text-align:center; /* 实现行内元素水平居中 */ 1.2 垂直居中 1.2.1单行文本的垂直居中 只需要让元素高度和行高相等即可； <style> div { height: 50px; width: 300px;
块级元素水平垂直居中方法
weixin_72686942的博客
08-01 3061
块级标签水平垂直居中
元素水平垂直居中的六种方法
whtis666的博客
06-01 7211
元素的水平垂直布局方法
【CSS】一文掌握元素水平垂直居中
weixin_50863323的博客
08-12 646
实现元素水平垂直居中有以下七种方法： 利用定位+margin:auto——子绝父相，设置top、left、right、bottom为0,在设置margin:auto 利用定位+margin:负值——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设margin-left和margin-top为自身元素宽高的负一半，实现水平垂直居中。 利用定位+transform——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设transform: translateX(
元素水平垂直居中的四种方法
以休伯利安的名义
02-20 5580
目录方法一：使用flex布局方法二：使用transform将元素进行移动，必要时可将margin设为负值（需要知道元素的尺寸）方法三：通过改变父元素和子元素的position属性实现居中效果方法四：子元素设置display: inline-block，父元素设置text-align: center且line-height等于height写在最后 方法一：使用flex布局 将父元素的display属性设为flex、justify-content和align-items属性都设为center，可以让子元素在父元
HTML对于元素水平垂直居中的探讨
09-28
主要针对HTML对于元素水平垂直居中进行的探讨，对元素水平垂直居中操作进行讲解，感兴趣的小伙伴们可以参考一下
css实现元素水平垂直居中常见的两种方式实例详解
09-24
主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来一起看看吧。
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 314
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 678
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
(css)鼠标移出样式不变
nyf_unknow的博客
04-23 236
需求：列表鼠标移入切换样式，移出保持不变。
HTML5+CSS3小实例：炫彩荧光线条登录框
艾恩小灰灰的博客
04-23 1013
实例：炫彩荧光线条登录框。技术栈：HTML+CSS。
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 495
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1048
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
CSS文本样式
qq_41807399的博客
04-23 450
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1336
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
深入探索CSS中的渐变艺术：线性渐变、径向渐变与锥形渐变详解
最新发布
艾恩小灰灰的博客
04-26 473
CSS渐变技术为网页设计带来了无尽的可能性，通过合理地运用线性渐变、径向渐变和锥形渐变，可以增强网页元素的视觉表现力，创造出生动多彩的用户体验。随着浏览器对CSS标准支持的不断升级，渐变效果的应用将更加广泛和灵活。记得在实际项目中检查浏览器兼容性，并根据需要添加相应的前缀以确保跨浏览器兼容。
行内元素水平垂直居中方法
07-14
实现行内元素水平垂直居中的方法有多种，以下列举几种常见的方法： 1. 使用`text-align: center;`和`line-height`属性：将父元素的`text-align`属性设置为`center`，然后将行内元素的`line-height`属性设置为与父...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值