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


相关推荐

  • intellij idea2021激活码【在线注册码/序列号/破解码】

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

    2022年3月17日
    44
  • 华为裁员风波,网络一片骂声!然而,没人懂华为的无奈「建议收藏」

    华为裁员风波,网络一片骂声!然而,没人懂华为的无奈「建议收藏」毫无疑问,今天各大媒体的头条都是华为裁员。任正非&华为《任正非:华为不奋斗就垮了,不可能养不奋斗者!》一文在朋友圈刷屏,各微信群都能看到这篇文章的身影,而今日头条等各新闻客户端的首页推荐、科技等频道充斥着“华为裁员”字眼的标题。网友对此的反映也基本一致——怒斥华为对老臣子的不公对待,压榨员工。网友的抨击然而,大部分人都没看到华为的无奈

    2022年7月18日
    41
  • pycharm字体变大快捷键_调整字体大小在哪里

    pycharm字体变大快捷键_调整字体大小在哪里在PyCharm的中文界面中,如何自定义热键,调整代码编辑界面的字体大小。进入PyCharm》文件》设置》键盘映射在键盘映射界面内的搜索框,搜索“字体”》找到‘增大字体’并双击》点击‘添加鼠标快捷键’然后看见有界面弹出后,直接按住‘Ctrl键、滑动滚轮向上’放大字体快捷键设置好后,缩小字体同理。字体放大和缩小都设置好后,记得应用+确定回到代码编辑界面,发现已经可以通过Ctrl+滚动滚动鼠标来控制字体大小。最后就可以快乐的敲代码了。…

    2022年8月28日
    2
  • py2app打包「建议收藏」

    安装cndevOE运行时依赖的库:1.安装python运行环境下载python-2.5.1-macosx.dmg,安装。打开终端,输入python看到version是为2.5.1,安装成功。2.安装wxPython下载wxPython2.8-osx-unicode-2.8.9.1-universal-py2.5.dmg,安装。打开终端,输入python,在shell下输入:im

    2022年4月8日
    44
  • 对称加密算法之分组加密的六种工作模式(ECB、CBC、PCBC、CFB、OFB、CTR)

    对称加密算法之分组加密的六种工作模式(ECB、CBC、PCBC、CFB、OFB、CTR)

    2021年10月5日
    101
  • pytorch tensorboard使用_铅球是什么体育X项目

    pytorch tensorboard使用_铅球是什么体育X项目目录什么是TensorboardX配置TensorboardX环境要求安装使用pip安装从源码安装使用TensorboardX一些tips什么是TensorboardXTensorboard是TensorFlow的一个附加工具,可以记录训练过程的数字、图像等内容,以方便研究人员观察神经网络训练过程。可是对于PyTorch等其他神经网络训练框架并没有功能像Tensorboard…

    2022年10月11日
    1

发表回复

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

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