div盒子水平垂直居中

Posted 2021-02-14 luckybaby519

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div盒子水平垂直居中相关的知识，希望对你有一定的参考价值。

一.div文本的

水平居中：margin:0 auto;

垂直居中：line-height:80px;注释：这里line-height的值要和div的高一致。

二：div盒子居中

给最外面的父元素设置宽高

给要水平垂直居中的div加定位

location {
 width:200px;
    height:200px;
   background-color: #00FF00;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

如下图绿色是水平垂直居中的

技术图片

以上是关于div盒子水平垂直居中的主要内容，如果未能解决你的问题，请参考以下文章