CSS垂直居中的方法

最新推荐文章于 2024-06-03 18:53:48 发布

Taojunhao

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量274

点赞数 1

分类专栏： CSS 文章标签：垂直居中 CSS垂直居中方法

本文链接：https://blog.csdn.net/weixin_39994522/article/details/96988647

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS垂直居中的方法

margin auto方法

.div1{
				width: 18.75rem;
				height:18.75rem;
				background: #FFFF00;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;	
			}

2.transform：translateY(100%) 方法

			.div1{
				width: 18.75rem;
				height:18.75rem;
				background: #FFFF00;
				transform: translateY(100%);
			}
			#div2{
				width: 6.25rem;
				height: 6.25rem;
				background-color: aqua;
				transform: translateY(100%);
			}
/-------------------body部分-------------------------/
			<body>
					<div class="div1">
						<div id="div2">	
						</div>
					</div>
			</body>

transform：translateY（100%）方法

display:table-cell法

			.div1{
				width: 18.75rem;
				height:18.75rem;
				background: #FFFF00;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			#div2{
				width: 6.25rem;
				height: 6.25rem;
				background-color: aqua;
				vertical-align: middle;
			}

			<body>
					<div class="div1">
						<div id="div2">
							
						</div>
					</div>
			</body>

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
在这里插入图片描述

4.flex布局法
将父元素设置为display:flex，并且设置align-items:center；

			.div1{
				width: 18.75rem;
				height:18.75rem;
				background: #FFFF00;
				display: flex;
				align-items: center;
				
			}
			#div2{
				width: 6.25rem;
				height: 6.25rem;
				background-color: aqua;
				
			}
			<body>
				<div class="div1">
					<div id="div2">
						
					</div>
				</div>
			</body>

在这里插入图片描述

Taojunhao

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直居中的方法

CSS垂直居中的方法margin auto方法.div1{ width: 18.75rem; height:18.75rem; background: #FFFF00; position: absolute; top: 0; bottom: 0; margin: auto; }2.transform：translateY(...
复制链接

扫一扫

专栏目录