码迷,mamicode.com
首页 > 其他好文 > 详细

hmtl div水平、垂直居中

时间:2018-12-13 10:26:54      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:博文   文字   比较   ext   ali   tom   radius   abs   log   

最近写网页经常需要将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
版权声明:本文为博主原创文章,转载请附上博文链接!

hmtl div水平、垂直居中

标签:博文   文字   比较   ext   ali   tom   radius   abs   log   

原文地址:https://www.cnblogs.com/4job/p/10112029.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!