div水平居中垂直居中_cssdiv水平垂直居中

div水平居中垂直居中_cssdiv水平垂直居中hmtl div水平、垂直居中

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

最近写网页经常需要将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;
}
———————
作者:qq_32623363
来源:CSDN
原文:https://blog.csdn.net/qq_32623363/article/details/77101971
版权声明:本文为博主原创文章,转载请附上博文链接!

转载于:https://www.cnblogs.com/4job/p/10112029.html

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107144.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • springCloud五大核心组件「建议收藏」

    springCloud五大核心组件「建议收藏」1.springCloud五大组件运行流程2.springcloud简单介绍SpringCloud是微服务架构的集大成者,将一系列优秀的组件进行了整合。基于springboot构建,对我们熟悉spring的程序员来说,上手比较容易。通过一些简单的注解,我们就可以快速的在应用中配置一下常用模块并构建庞大的分布式系统。SpringCloud的组件相当繁杂,拥有诸多子项目。重点关注Netfl…

    2022年4月19日
    120
  • HTML 5 <canvas> 标签

    HTML 5 <canvas> 标签

    2021年10月10日
    37
  • MySQL的字段类型_mysql数据库字段类型

    MySQL的字段类型_mysql数据库字段类型前言:要了解一个数据库,我们必须了解其支持的数据类型。MySQL支持大量的字段类型,其中常用的也有很多。前面文章我们也讲过int及varchar类型的用法,但一直没有全面讲过字段类型,本篇文章我们将把字段类型一网打尽,讲一讲常用字段类型的用法。常用的字段类型大致可以分为数值类型、字符串类型、日期时间类型三大类,下面我们按照分类依次来介绍下。1.数值类型数值类型大类又可以分为整型、浮点型、…

    2025年9月19日
    4
  • 分子动力学模拟软件_分子模拟软件Discovery Studio教程(十九):虚拟氨基酸突变提高结合亲和力…

    分子动力学模拟软件_分子模拟软件Discovery Studio教程(十九):虚拟氨基酸突变提高结合亲和力…DiscoveryStudio™(简称DS)是专业的生命科学分子模拟软件,DS目前的主要功能包括:蛋白质的表征(包括蛋白-蛋白相互作用)、同源建模、分子力学计算和分子动力学模拟、基于结构药物设计工具(包括配体-蛋白质相互作用、全新药物设计和分子对接)、基于小分子的药物设计工具(包括定量构效关系、药效团、数据库筛选、ADMET)和组合库的设计与分析等。蛋白的氨基酸定点突变可用于酶与抗体的设计,这…

    2022年5月9日
    99
  • Springboot自定义注解,支持SPEL表达式

    Springboot自定义注解,支持SPEL表达式举例,自定义redis模糊删除注解1.自定义注解importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Target(E…

    2025年6月17日
    4
  • 主流手机分辨率与尺寸的关系_手机最好的分辨率

    主流手机分辨率与尺寸的关系_手机最好的分辨率1、小米小米1:  480×854   4.0英寸小米2:  720×1280  4.3英寸小米3:  1080×1920 5.0英寸小米4:  1080×1920 5.0英寸小米note:1080×1920 5.7英寸2、华为华为p7:  1080×1920

    2022年8月13日
    16

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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