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;//这里的top值等于它本身高的1/2;
    margin-left: -100px;//这里的left值等于它本身宽的1/2;
}

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

 

 

 

 

posted @ 2019-03-22 22:13  骄傲一点才可爱  阅读(1557)  评论(0编辑  收藏  举报