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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • executequery方法返回值_mysql数据库有什么用

    executequery方法返回值_mysql数据库有什么用1if(AccessCon.ExecuteSql(sql=”select*fromsalesDatawhereindex='”+man.Index+”‘”)>0)2{3retValue=AccessCon.ExecuteSql(sql=”updatesalesDatasetsellingPrize='”+m…

    2025年10月29日
    4
  • pycharm如何打开原来的项目_terminal怎么打开

    pycharm如何打开原来的项目_terminal怎么打开Pycharm的下方工具栏中有两个窗口:PythonConsole和Terminal(如下图)其中,PythonConsole叫做Python控制台,即Python交互模式;Terminal叫做终端,即命令行模式。Python交互模式主要有两种:CPython用>>>作为提示符,而IPython用In[序号]:作为提示符。Python交互式模式可以直接输入代码,然后执行,并立刻得到结果,因此Python交互模式主要是为了调试Python代码用的。命..

    2022年8月28日
    6
  • 压缩文件的加密与破解

    压缩文件的加密与破解压缩文件的加密与破解0x00前言0x01过程1.压缩文件的加密注意点:2.压缩文件的解密0x00前言这是我对压缩文件的加密与破解的学习记录。0x01过程1.压缩文件的加密安装Winzip、Winrar软件进行加密在建好的文档右键—-&gt;添加到压缩文件—-&gt;选择rar/zip—-&gt;高级—-&gt;设置密码注意点:1.尽量不要使用Winra…

    2022年4月29日
    55
  • 御用导航提示页面_终实现微信位置发送到汽车导航 越用越好用

    御用导航提示页面_终实现微信位置发送到汽车导航 越用越好用我们使用微信,其中一个非常好用的功能就是发送位置。在朋友聚会或者去朋友家做客时,只需朋友发送一个微信用微信位置,我们就非常清楚的得知目的地,直接把这个位置推送给手机里的导航软件,并发起导航。然而对于习惯使用中控屏导航的车友来说,这个过程脱节了。微信位置只能使用手机导航,不能直接推送到车载导航。手动输入,无疑更加烦躁,担心输错,还要确认好几次。在最新的高德地图车机版中,我们留意到更新中“手…

    2022年5月30日
    320
  • lrzsz安装

    lrzsz安装当服务器没有安装FTP等工具上传文件时,可以通过rz上传文件,sz文件名进行下载文件,默认下载路径为:C:\Users\用户\Downloads,安装如下:yuminstalllrzsz-y转载于:https://www.cnblogs.com/heruiguo/p/8417031.html…

    2022年6月23日
    29
  • 在 Linux 下搭建 Git 服务器

    在 Linux 下搭建 Git 服务器

    2021年10月23日
    39

发表回复

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

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