zoukankan      html  css  js  c++  java
  • HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结

    HTML+CSS,div屏幕中居中(水平居中+垂直居中)方法总结

     版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32623363/article/details/77101971

    最近写网页经常需要将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;
         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;
         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>
  • 相关阅读:
    c# DateTime 格式化输出字符串
    计算运行时长
    ubuntu helpers
    json.net omit member
    git 本地项目关联新repo
    c# DirectoryEntry LDAPS
    为视图或函数指定的列名比其定义中的列多
    Java反序列化漏洞学习笔记
    流量抓包
    软件安全策略-下
  • 原文地址:https://www.cnblogs.com/grj001/p/12224461.html
Copyright © 2011-2022 走看看