码迷,mamicode.com
首页 > Web开发 > 详细

css实现水平垂直居中

时间:2019-01-21 11:15:45      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:htm   size   改变   高度   block   top   适用于   nbsp   bsp   

未知宽高
1、把父元素设置成table,子元素为table-cell,然后用vertical-align:center
    优点:父元素可以改变高度
    缺点:IE8以下不支持,且对img无效果
 
2、用一个空标签并设置vertical-align的基准线为中间,并让它inline-block,宽为0,高度100%
    缺点:多了没用的空标签,且转为行内块
              IE6、7不支持  (可用_zoom:1;*display:inline解决兼容)
 
3、让该元素的父元素line-height=height,并转成行内块,在vertical-align
    缺点:只适用于HTML5
 
已知宽高
给父元素相对定位,子元素绝对定位
1、绝对定位;margin:auto;top:0;left:0;bottom:0;right:0;
 
2、绝对定位;top:50%;向上移动高的一半(负数)
            left:50%;向左移动宽的一半(负数)
 
3、绝对定位;top:50%;left:50%;transform:translate(-50%,-50%)
 
已知或未知
给父元素body加(display:flex;justify-content:center;align-items:center
给html、body加(height:100%

css实现水平垂直居中

标签:htm   size   改变   高度   block   top   适用于   nbsp   bsp   

原文地址:https://www.cnblogs.com/tis100204/p/10297117.html

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