CSS基础(四)：居中、定位

CSS基础（四）

居中方法

水平居中（两类共三种）

1.行内元素水平居中（一种）

属性：text-align:center;

用于父级元素，且是块父级中

.divP{
    text-align:center;
}

2.块级元素水平居中（两种）

属性：text-align:center;

用于待居中元素

用于块级元素，行内元素不起作用。

属性：margin-left:auto; maigin-right:auto;

用于待居中元素

这种方法使得元素的位置随着父级元素的大小而改变。但是不可以实现已经float的元素的居中。

---

失效：

1. text-align

• 适用于块级元素，行级元素不适用。

2. margin

• 块级元素设置为了绝对位置（不可以设置为绝对位置）

原因：因为margin可以理解为，规定该元素与其他元素的距离。那么就说明该元素应在文档流之中，这样才能计算auto。

• 块级元素没有设置宽度（指的是啥也没的，若里面有东西自然会有宽度）

---

垂直居中（两类共四种）

1. 行内元素垂直居中（两种）

• 对于单行元素而言（链接、单行文本）

属性：padding-top与padding-bottom设置为同一大小。

用于待居中元素的父级元素

这种方法很有限，大多数情况是不能使用的。这时使用另一种方法如下

属性：line-height与height设置为同一大小。

用于待居中的元素的父级元素

div{
    background:black;
    height:100px;
    line-height:100px;
}

2. 块级元素垂直居中（两种）

• 已知本块级元素高度，用定位加偏移来实现居中

.father{
    position: relative;
    width: 600px;
    height: 600px;
}
.child{
    background: black;
    position: absolute;
    top: 50%;
    width: 100px;
    height: 100px;
    /*margin-top是-0.5 x height*/
    margin-top: -50px;
}

解释：父级元素高600，孩子块级元素位置在距父的顶的50%处（顶在300px），孩子高100px（超出对称线100）。所以孩子要往回跑它的高的一半（-50px）。

注意：

1. 采用绝对定位就不能用margin：auto去水平居中了。

2. 父级采用relative，孩子必须采用absolute。若孩子采用absolute，父级可以是relative，也可以是absolute

---

失效：

• 若父级边框随着margin-top的改变而塌陷

原因：查看是否父级与孩子块元素都采用的relative（绝对定位会使得其不再文档流中。若都采用相对定位，那么它们都在文档流中，父级自然会随着孩子的改变而改变。）

建议：

父级采用相对定位（使其仍在文档流中），孩子采用绝对定位（使其不会改变父级的边框、位置）。若父级也采用了绝对定位那么它就会跳出文档流（这样不好）。

---

• 未知本块级元素高度，用定位加偏移来实现居中

.parent { 
    position: relative;
} 
.child { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

即水平又垂直（两类共两种）

1. 宽高固定的元素（一种）

• 使用定位加偏移实现。

.father{
    position: absolute;
    width: 600px;
    height: 600px;
    background: aqua;
}
.child{
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin的值随着padding变化而变化*/
    margin: -70px 0 0 -170px;
    background: black;
}

2. 宽高不固定（一种）

• 使用定位加偏移实现。

.father{
    position: absolute;
    width: 600px;
    height: 600px;
    background: aqua;
}
.child{
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    /*因为宽高不确定所以舍弃->margin: -70px 0 0 -170px;*/
    transform: translate(-50%, -50%);
    background: black;
}

总结常用

---

定位：

用于块级元素，既可以用于水平又可以用于垂直

margin-left、margin-right：auto：

用于块级元素，用于水平

text-align：center：

用于块级元素（块级本身居中、块级内行级居中），用于水平

line-height = height：

用于块级元素（块级本身居中、块级内行级居中），用于垂直

---

定位

相对定位

---

区分：

1、相对定位是，相对于原来位置移动。（原来位置是参照物，从原来位置开始移动）

2、绝对定位是，相对于最近祖先的最外层边框移动。（最近祖先的最外层边框是参照物，从原来位置移动）

3、相对定位后的元素仍在标准文档流中，但是绝对定位就会跳出标准文档流。

4、相对定位移动后其他元素不会占据原位置，但是绝对定位移动后其他元素会怼到原位置上。

举个例子：定位鼓楼广场（哈哈哈，中国的通用广场名。各个城市应该都有吧）

相对定位：相对于你所在的位置，你怎么走可以走到鼓楼广场。（从你出发，相对于你的原位置）

绝对定位：相对于临汾的市边界，你怎么走可以走到鼓楼广场。（从你出发，相对于临汾的市边界）

---

属性：position：relative + top\left\right\bottom

/*距你原位置的top 100px，距你原位置的left 100px。所以这是从你原位置向下向右移动100px*/
div{
    position:relative;
    top:100px;
    left:100px;
}

注意：这是距你原位置，若top：-100px，就是想上移动100px。left：-100px，就是向左移100px。（bottom同理，bottom：100px，向上移动100px。bottom：-100px，向下移动100px）

绝对定位

/*距你最近已定位父级的top 100px，距你最近已定位父级的left 100px。所以这是从你最近已定位父级向下向右移动100px*/
div{
    position:absolute;
    top:100px;
    left:100px;
}

其实**“绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，“浏览器是最外层的已定位的父级”这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的**，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

定位移动后，若它下面有元素，则会怼上去

链接二原本在链接一下面，移动到最右边后，链接三就怼上去了。

固定位置

/*right,bottom是对于整张屏幕而言的，也就是这个div固定死在右下角了*/
div{
    position:fixed;
    right:0px;
    bottom:0px;
}

绝对定位、相对定位都是相对性的（相对于最近已定位的祖先、相对于原位置）。但是我们有时想要卡死在页面某一位置的、不随滚动条拉动而移动的。比如导航栏、回到顶部。

所以产生固定位置。