元素水平垂直居中的几种方式（简单直接）

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

weixin_流年

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

阅读量723

点赞数 1

分类专栏： html5 文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_40967353/article/details/108334358

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端项目开发时，我们在页面布局的时候，经常会遇到让一个元素水平垂直居中，实现的方式很多，下面就来简单总结下，直接上代码，需要的可以直接使用：

方式1

<body>

	<div class="wrap"></div>

</body>

   .wrap{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;
			top: 0px;
			margin: auto;
			background: red;
		}

需要注意的是，当我们的页面有滚动条的时候，我们需要将绝对定位修改为固定定位。

方式2

<body>

	<div class="wrap"></div>

</body>

        html,body{
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
		}
		body{
			display: flex;
            align-items: center;
			justify-content: center;
		}
		.wrap{
            width: 100px;
            height: 100px;
            background-color: red;			
		}

方式3

        html,body{
			margin: 0;
			padding: 0;
		}
		.wrap{
			position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;	
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;		
		}

方式4

        html,body{
			margin: 0;
			padding: 0;
		}
		.wrap{
			position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;	
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
		}

以上就是元素水平垂直居中的几种方式，希望对你有所帮助。

weixin_流年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
元素水平垂直居中的几种方式（简单直接）

前端项目开发时，我们在页面布局的时候，经常会遇到让一个元素水平垂直居中，实现的方式很多，下面就来简单总结下，直接上代码，需要的可以直接使用：方式1<body> <div class="wrap"></div></body> .wrap{ width: 100px; height: 100px; position: absolute; left: 0px; right: 0px; bottom:..
复制链接

扫一扫