div在div中垂直居中水平居中(css如何让div水平居中)

最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码:<body><divclass="main">

大家好,又见面了,我是你们的朋友全栈君。

最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上<center>标签即可,或者设置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;
}

效果如图:
这里写图片描述

  • 方法二:
    仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
  • 方法三:
    对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
<p><center>123</center></p>

这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

<p style="text-align:center;">123</p>



欢迎大家加入QQ群一起交流讨论,
「吟游」程序人生——YinyouPoet

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126427.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PhpStorm 2021.5.1 激活码【在线注册码/序列号/破解码】[通俗易懂]

    PhpStorm 2021.5.1 激活码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Android sha1_android studio打包apk教程

    Android sha1_android studio打包apk教程目录开发版SHA1获取:发布版SHA1获取:开发版SHA1获取:首先win+r后点击确认输入cd.android再输入命令行:keytool-list-v-keystore~/.android/debug.keystore-aliasandroiddebugkey(注意目录选择、开发版本、发布版本等问题)密码:原始密码一般为android,(输入密码时时没有变化的直接输入回车就行)发布版SHA1获取:需要知道签名文件key.

  • java反射机制原理详解

    java反射机制原理详解????Java学习路线配套文章:Java学习路线总结,搬砖工逆袭Java架构师(全网最强)????基础推荐:Java基础教程系列????实战推荐:SpringBoot基础教程????简介:Java领域优质创作者????、CSDN哪吒公众号作者✌、Java架构师奋斗者????????扫描主页左侧二维码,加入群聊,一起学习、一起进步????欢迎点赞????收藏⭐留言????目录一、前情提要1、需求由于某种原因,您可能在项目中遇到类似的需求:你需要读取一个文件,比

  • 删除链表倒数第n个节点_求链表的倒数第m个元素

    删除链表倒数第n个节点_求链表的倒数第m个元素原题链接给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。进阶:你能尝试使用一趟扫描实现吗?示例 1:输入:head = [1,2,3,4,5], n = 2输出:[1,2,3,5]示例 2:输入:head = [1], n = 1输出:[]示例 3:输入:head = [1,2], n = 1输出:[1]提示:链表中结点的数目为 sz1 <= sz <= 300 <= Node.val <= 1001 <= n <= s

  • Java程序员必看的 14 本 Java 书籍![通俗易懂]

    Java程序员必看的 14 本 Java 书籍![通俗易懂]关乎于程序员,除了做项目来提高自身的技术,还有一种提升自己的专业技能就是:多!看!书!毕竟,书是学习的海洋呢!So,Java程序员你们准备好了吗?双手奉上Java程序员必读之热门书单。在下面这13本书籍中小编还是要建议大家可以先去关注英文原版,毕竟翻译的书籍中都有一定的语法错误。 入门 《HeadFirstJava》作者:KathySierra/…

  • 微信域名防屏蔽防封系统,轻松微信中域名网站被屏蔽被封的问题「建议收藏」

    微信域名防屏蔽防封系统,轻松微信中域名网站被屏蔽被封的问题「建议收藏」做微信营销活动,域名没被封过,那你的营销人生肯定是不完整的。如果做到微信域名防封呢?这就要借助一些工具来实现有效的防封措施了。 第一步你需要有一个微信域名检测接口,自己开发或是购买都可以。第二步配置你的程序,用三套域名A、B、C,比如说分享出去的域名是A,这里面A被称作是主域名。点开后跳到B,跳转之前检测一下B有没有被封,这里面的B就称作是落地域名。通常情况下落地域名B…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号