zoukankan      html  css  js  c++  java
  • css实现水平垂直居中

    未知宽高
    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%
  • 相关阅读:
    学习FastDfs(三)
    学习FastDfs(二)
    学习FastDfs(一)
    学习ELK日志平台(五)
    学习ELK日志平台(四)
    学习ELK日志平台(二)
    学习ELK日志平台(一)
    并不对劲的CTS2019
    并不对劲的BJOI2019
    并不对劲的bzoj1095:p2056:[ZJOI2007]捉迷藏
  • 原文地址:https://www.cnblogs.com/tis100204/p/10297117.html
Copyright © 2011-2022 走看看