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

div盒子水平、垂直居中

时间:2019-03-22 22:47:14      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:居中   14.   oca   .com   ima   定位   inf   top   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盒子水平、垂直居中

标签:居中   14.   oca   .com   ima   定位   inf   top   div   

原文地址:https://www.cnblogs.com/luckybaby519/p/10581369.html

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