水平居中、垂直居中

最新推荐文章于 2021-06-15 18:33:21 发布

江西师范大学-20届-吴悠

最新推荐文章于 2021-06-15 18:33:21 发布

阅读量149

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_39905917/article/details/90645520

版权

前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

代码如下：就是div的大小必须写死

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
            .centerH{position: absolute;left:0;right:0;margin:auto;}                
            .centerV{position: absolute;top:0;bottom:0;margin:auto;}                  
            .centerHV{position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;}  
		</style>
	</head>
	<body>
		<div class="centerHV" style="width: 100px; height: 100px; background-color: red;">水平垂直居中</div>
		<div class="centerH" style="width: 100px; height: 100px; background-color: red;">水平居中</div>
		<div class="centerV" style="width: 100px; height: 100px; background-color: red;">垂直居中</div>
	</body>
</html>

效果如图，是响应式的：
在这里插入图片描述
居中对齐的另一种方式：

float: none;
display: block;
margin-left: auto;
margin-right: auto;

优惠劵

江西师范大学-20届-吴悠

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中、垂直居中

代码如下：就是div的大小必须写死<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .centerH{position: absolute;left:0;right:0;m...
复制链接

扫一扫