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


相关推荐

  • gzip和gunzip 解压参数「建议收藏」

    gzip和gunzip 解压参数「建议收藏」Linux压缩保留源文件的方法:gzip–cfilename&gt;filename.gzLinux解压缩保留源文件的方法:gunzip–cfilename.gz&gt;filenamegunzip的用法  1.作用gunzip命令作用是解压文件,使用权限是所有用户。2.格式gunzip[-acfhlLnNqrtvV][-s-Linux压缩保留源文件的方法: g…

    2022年9月3日
    3
  • 【新版】掩日免杀windows Defender「建议收藏」

    【新版】掩日免杀windows Defender「建议收藏」掩日免杀是一个非常优秀的项目,目前在`4月19`号已经更新,更新的变动较大,支持的种类更多,在这里再试试现在的效果如何:

    2022年8月20日
    13
  • 查看服务器上的图片_js获取图片

    查看服务器上的图片_js获取图片eog命令eyeofgnome,用来在服务器端查看图片。

    2022年8月3日
    5
  • 微信公众平台开发教程Java版(六) 事件处理(菜单点击/关注/取消关注)

    微信公众平台开发教程Java版(六) 事件处理(菜单点击/关注/取消关注)前言:事件处理是非常重要的,这一章讲讲常见的事件处理 1、关注/取消关注 2、菜单点击事件类型介绍:在微信中有事件请求是消息请求中的一种。请求类型为:event 而event事件类型又分多种事件类型,具体分 关注:subscribe 取消关注:unsubscribe 自定义菜单点击:CLICK 根据上面的类型分类可建对应的常量…

    2022年6月22日
    48
  • 密码学与网络安全第七版部分课后习题答案[通俗易懂]

    密码学与网络安全第七版部分课后习题答案[通俗易懂]第0章序言1.课后题汇总(仅部分)第一章思考题:1、2、4、5第二章习题:10、12、16第三章习题:9第四章思考题:4、5、6第五章习题:11第六章习题:2、6第七章思考题:2、3、4习题:4、7、8第八章习题:2第九章思考题:5、6习题:2、3第十章习题:1、2第十一章思考题:1、2、3第十二章思考题:1、3、4、7第十三章思考题:…

    2022年5月21日
    36
  • Precision,Recall,F1score,Accuracy的理解

    Precision,Recall,F1score,Accuracy的理解Precision,Recall,F1score,Accuracy四个概念容易混淆,这里做一下解释。假设一个二分类问题,样本有正负两个类别。那么模型预测的结果和真实标签的组合就有4种:TP,FP,FN,TN,如下图所示。这4个分别表示:实际为正样本你预测为正样本,实际为负样本你预测为正样本,实际为正样本你预测为负样本,实际为负样本你预测为负样本。那么Precision和Recall表示什么意思?一般

    2022年10月14日
    0

发表回复

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

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