使用css实现元素水平垂直居中

最新推荐文章于 2023-09-30 13:11:25 发布

纟31

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量186

点赞数

分类专栏： css 文章标签： css 居中

本文链接：https://blog.csdn.net/qq_35423431/article/details/93631081

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在做弹窗组件时，需要实现元素水平垂直居中，总结记录一下。（有借鉴）

1、使用position:absolute，绝对定位实现

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			height:500px;
			width: 100%;
			background: yellow;
			position: relative;
		}
		.left{
			width: 200px;
			height: 100px;
			background: green;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -50px 0 0 -100px;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="left">qwe</div>
</div>
</body>
</html>

绝对定位到屏幕的一半，是相对于左上角的坐标点，还需要设置上移height的50%，左移width的50%。父子关系的话，需要给父元素设置position: relative，子元素是相对于父元素绝对定位的。

2、transform转换（不定宽高元素实现元素水平垂直居中）

.left{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		background: green;
	}

定位方法前提是宽度和高度已知，当两者未知时，使用transform，但是，但是，这种方法可能会有文字模糊的问题，当像素是非整数时。并且，在父元素使用transform，会限制positon:fixed，不能固定变成跟absolute一样。
可以看下这篇文章，详细介绍了transform的影响：CSS3 transform对普通元素的N多渲染影响

3、弹性布局

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 100%;
			height: 500px;
			display: flex;
			justify-content: center; /*水平居中 主轴上的对齐方式*/
			align-items: center; /*垂直居中 交叉轴上的对齐方式*/
			background: yellow;
		}
		.left{
			background: green;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="left">
		123
		<p>qwe</p>
	</div>
</div>
</body>
</html>

是在父元素上进行设置的，对于文本居中也有效。
flex浏览器兼容在这里插入图片描述

纟31

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css实现元素水平垂直居中

在做弹窗组件时，需要实现元素水平垂直居中，总结记录一下。（有借鉴）1、使用position:absolute，绝对定位实现<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css">...
复制链接

扫一扫