如何实现div标签的水平居中和垂直居中

如何实现div标签的水平居中和垂直居中？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网页空间、营销软件、网站建设、临清网站维护、网站推广。

在前端开发时，经常会遇到需要居中的情形，居中分2种情况，一个是水平居中，一个是垂直居中，总结一下用到的方法。

水平居中实现

margin：0 auto

auto表示外边距左右距离相同即可实现水平居中的效果

垂直居中实现

1、最常用到的一种方式是根据偏移量来实现

<style>
    *{margin: 0;padding: 0;}
    .content{
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
    }
    .beat{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: absolute;
        left:50%;
        top:50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div class="content">
    <div class="beat">
    </div>
</div>

红色方块位于黑色方块的中心位置，实现了垂直居中效果

left,top分别设置50%，红色方块的起始点位于垂直居中的位置，效果如下图：

想要实现方块内部中心点垂直居中，还要加上偏移量，margin-top的值为红色框heigh/2，margin-left的值为红色框width/2。

2、让p块里的多行文字垂直居中，可以用table和table-cell来实现

<style>
    *{margin: 0;padding: 0;}
    .content{
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
        color: #fff;
        display: table;
        text-align: center;
    }
    .content p{
        display: table-cell;
        height: 100px;
        vertical-align: middle;
    }
</style>

<div class="content">
   <p>垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分
       常见的效果之一垂直居中是布局中十分常见的效果之一</p>
</div>

display: table使块状元素成为一个块级表格，display: table-cell;子元素设置成表格单元格，vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

网页名称：如何实现div标签的水平居中和垂直居中
转载注明：https://www.cdcxhl.com/article28/jgchjp.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、外贸建站、服务器托管、静态网站、企业网站制作、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联