方法一:

  • 实现思路:margin负值配合百分比

margin 负间距原理
        使用margin属性的负间距实现具有width属性和height属性的绝对定位元素的居中
  position: absolute;
            left: 50%;
            /* 定位元素盒的宽度的一半 */
            top: 50%;
            /* 定位元素盒的高度的一半 */
            margin-left: -100px;
            /* -定位元素本身的宽度的一半 */
            margin-top: -100px;
            /* -定位元素本身的高度一半 */

方法二:

  • 实现思路:left,right,top,bottom并用,配合margin:auto;

    如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的,那么元素的“height”和“width”将隐式地由偏移量决定。
    ​
     使用margin:auto;实现具有width属性和height属性的绝对定位元素的居中
     
       position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
  • 注意:ie低版本不兼容

  • 注意:定位并不是一种用来做主要页面布局的方式,主要用于管理和微调页面中的一个特殊项的位置。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐