【响应式Web前端设计】让div在屏幕中居中(水平居中+垂直居中)方法

我们都知道使用margin:auto可以让元素水平居中的。
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上

标签即可,或者设置margin:auto;当然也可以用下面的方法

下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:

<body>
	<div class="main">
		<h1>MAIN</h1>
	</div>
</body>

方法一:
div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

.main{
	text-align: center; /*让div内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

在这里插入图片描述

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
<p> <span style="font-size:18px;">深度学习和神经网络隶属于机器学习范畴,但是由于它在行业应用广泛、研究成果显著,成为当下最热门的研究领域,因此深度学习就作为一门独立的学科被提出来了。</span> </p> <p> <span style="font-size:18px;">本课程使用的开发工具为<span style="color:#ff0000;">TensorFlow2.X</span>,如果你刚接触TensorFlow2,“墙裂”建议你从TensorFlow2学起,因为Google团队对其做了<span style="color:#ff0000;">重大调整</span>,它极大降低了开发者学习的门槛,更加简单,易用,开发者更多的应该关注深度学习算法本身。</span> </p> <p> <span style="font-size:18px;">本课程知识覆盖全面,项目案例丰富,以项目为导向,通过动态图形展现推理过程,深入浅出,从原理到实践均能很快掌握。</span> </p> <p> <span style="font-size:18px;">课程编排如下:</span> </p> <ol> <li> <span style="font-size:18px;">神经网络原理(神经元,单层感知器,多层感知器)</span> </li> <li> <span style="font-size:18px;">TensorFlow2.X基础(环境搭建,常用函数,线性回归实现)</span> </li> <li> <span style="font-size:18px;">全连接神经网络(前馈神经网络,全连接神经网络,神经网络搭建,手写数字识别,衣物识别)</span> </li> <li> <span style="font-size:18px;">模型优化(模型复杂度,损失函数,学习率,优化器,图片增强,dropout)</span> </li> <li> <span style="font-size:18px;">CNN卷积神经网络(原理,LeNet5,AlexNet,VGGNet,InceptionNet,ResNet,物品识别)</span> </li> <li> <span style="font-size:18px;">RNN循环神经网络(原理,LSTM,GRU,股票预测)</span> </li> <li> <span style="font-size:18px;">BP神经网络(正向传播,反向传播)</span> </li> <li> <span style="font-size:18px;">实战项目(猫狗大战,人工智能古诗)</span> </li> </ol> <p>   </p> <p> 问:学习本课程需要哪些前置知识? </p> <p> 答:基本的Python编程知识,对机器学习的线性回归和逻辑回归有简单的认识即可。 课程会专门开辟一章用于讲解TensorFlow2的知识,即使没有TensorFlow编程经验,也能快速掌握。 </p> <p> <span style="font-size:18px;color:#e53333;"><strong>注意:</strong></span> </p> <p> <span style="font-size:18px;"><strong><span style="color:#e53333;">全套数据集和实现代码</span>在<span style="color:#e53333;">第一章的第一个视频</span>位置下载。</strong></span> </p> <p> <span style="font-size:18px;"><strong><span style="color:#e53333;">每章的PPT</span>在<span style="color:#e53333;">每章的第一个视频</span>位置下载。</strong></span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值