div内所有元素居中对齐

最新推荐文章于 2022-06-08 11:33:08 发布

相聚万年树

最新推荐文章于 2022-06-08 11:33:08 发布

阅读量3.6k

点赞数

分类专栏：自写demo 踩过的坑文章标签： html css

本文链接：https://blog.csdn.net/kathiegoodlucky/article/details/113128465

版权

自写demo 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

踩过的坑

7 篇文章 0 订阅

订阅专栏

元素居中对齐

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素居中对齐</title>
<style>
</style>
</head>

<body>
实现元素居中对齐的两种方式
	第一种，利用flex和align实现，实现简便，但是不支持ie9及以下的版本
	<div style="width:200px;background: red;height: 100px;display:flex;align-items: center;"> 
		<button style="width:50px;background: blue;height: 20px;margin: 0 auto;">按下</button>
	</div>
	第二种，利用margin和auto实现，auto是相对于剩余的空间设置margin值，不过得把前后左右的margin都先设置为0
	支持ie9及以下的版本
	<div style="width:200px;background: black;height: 100px; position: absolute;margin:auto;"> 
		<button style="width:50px;background: blue;height: 20px;  top: 0;
                left: 0;
                right: 0;
                bottom: 0;
			    position: absolute;
			    margin:auto;">按下</button>
	</div>
	
</body>
</html>

效果图
在这里插入图片描述

相聚万年树

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
div内所有元素居中对齐

元素居中对齐代码<!DOCTYPE html><html><head><meta charset="utf-8"> <title>元素居中对齐</title><style></style></head><body>实现元素居中对齐的两种方式第一种，利用flex和align实现，实现简便，但是不支持ie9及以下的版本 <div style="width:2
复制链接

扫一扫