定位、元素垂直水平居中的方法

目录

定位 position (定位属性和坐标属性)

坐标属性

定位元素的层叠顺序

z-index:数值;

子绝父相

让一个元素始终在父元素(窗口)水平、垂直位置居中： (垂直,水平居中的方法)

CSS 有三种基本的定位机制：普通文档流、浮动文档流、定位文档流

定位 position (定位属性和坐标属性)

       static：默认值，无特殊定位

1.相对定位 position:relative;

参考点:原来的位置;

原来的位置仍然占位,不脱流;

2.绝对定位 position:absolute;

参考点:带有定位的最近一级的父元素,都没有定位,以html为参考点;

原来的位置不占位,脱流;

margin:0 auto;无效

3.固定定位 position:fixed;

参考点:浏览器的可视窗口(浏览器的四条边);

原来的位置不占位,脱流;

4.粘性定位 position:sticky;(兼容性差)

是相对定位relative和固定定位fixed的结合；

必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位;

当前元素（当前元素的父元素）在屏幕内时，会遵循fixed的原则。

如果元素(父元素)要滚出屏幕，会遵循relative的原则。

（sticky不能结合margin一起使用）
 

坐标属性

必须给当前元素添加定位属性，才能使用坐标属性

top, bottom, left, right;  (四个值用两个或一个就够了)

top当属性值为正数时，向下移动，负数时，向上移动。

bottom当属性值为正数时，向上移动，负数时，向下移动。

left当属性值为正数时，向右移动，负数时，向左移动。

right当属性值为正数时，向左移动，负数时，向右移动。

定位元素的层叠顺序

z-index:数值;

1. 数值没有单位;
2. 默认值auto;
3. 设置后，数值越大，层越靠上,可以为负数;
4. 只有定位的盒子才可以使用z-index;
5. 同一级元素有定位属性的元素, 没有设置z-index时，在结构上 最后写的优先显示在上层(就近原则)；

子绝父相

子级是绝对定位,父级是相对定位.

1. 子级绝对定位不会占有位置;
2. 父级用相对定位,要占有位置;

子绝父相不是固定的,父级也可以是固定定位或绝对定位.

---

让一个元素始终在父元素(窗口)水平、垂直位置居中： (垂直,水平居中的方法)

方法一:

1. 添加定位属性
2. left:50%;  top:50%;(父容器宽度,高度走一半)
3. margin-left:-盒子的宽度的一半;(负值)  marfin-top:-盒子的高度的一半;(负值)

 

div {
  height: 400px;
  width: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
margin-top: -200px;
margin-left: -100px;

/* margin: -200px 0 0 -100px; */
}

方法二:

1. 添加定位属性; 只支持绝对定位和固定定位;
2. ↓

div {
  width: 200px;
  height: 200px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

方法三:  定位属性+位移属性;

1. 添加定位属性, left:50%;  top:50%;    走父元素宽度的一半, 父元素高度的一半;
2. transform: translate(-50%px,-50%px);  当前元素 宽度的一半, 当前元素高度的一半; 负值  ; 向左,向上

方法四: flex布局

给父元素添加 dispaly:flex;   justify-content:center;   align-items:center;

方法五: gird布局 

给父元素添加  :  display: grid;   place-items:center;

<style>
      .grid {
        display: grid;
        place-items:center;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .p {
        width: 100px;
        height: 100px;
        background-color: red;
      }
 </style>


<div class="grid">
      <p class="p"></p>
</div>