IFE-Task-04:定位和居中问题

这次的任务是实现下图中灰色元素居中,黄色扇形元素始终在贴附在容器的边框内。

理论知识

定位元素上篇文章讲过,这里再相互比较。

| static      | relative          | absolute               | fixed              |
| ----------- | ----------------- | ---------------------- | ------------------ |
| 普通流       | 普通流            | 脱离普通流              | 脱离普通流          |
| 无法设置位移 | 可以设置位移       | 可以设置位移            | 可以设置位移         |
| 正常位置     | 定位相对于初始位置 | 定位于非static的祖先元素 | 定位相对于浏览器窗口 |

居中

居中问题详解介绍的很清楚。块级元素和行内元素的居中方法有所不同。

  1. 水平居中

    块级元素能够通过设置元素内文本水平居中({ text-align: center; }),可以将元素内部的行内元素居中。而块级元素自己则通过margin-left、margin-right设置为auto。这是有原因(原文)的,(在W3C模型中)在水平方向上,包含元素的父元素(元素包含块)的宽度(width)由:margin-left、border-left、padding-left、width、padding-right、border-right、margin-right7个属性确定。属性值默认为0,或者特定值。而width、margin-left、margin-right还可以设置为auto:

    • 三者之中有一个设置为auto,则该属性的宽度为父元素的宽度减去其他两个属性的值。
    • 如果width固定,margin: auto,则两个margin平分剩下的宽度。
    • 如果三个属性都设置auto,而margin设置为0,而width宽度为尽可能的宽。

    所以我们可以通过设置左右外边距来水平居中block元素,{ margin: 0 auto; }。但是这个方法无法满足多个block(inline-block)在一行中水平居中。但是我们可以使用flex布局来将多个block元素在一行中水平居中。使用样式{ display: flex; justify-content: center; } 即可让flex布局的元素水平居中。

  2. 垂直居中

    行内元素不能设置左右内边距、外边距,但是可以设置padding-top、padding-bottom两个属性相等来垂直居中。当多行元素在宽度较小的屏幕上重叠时,就需要设置line-height和white-space,{ line-height: 需要的高度; white-space: nowrap: } 来垂直居中。如果元素为table cell,使用vertical-align = middle。当然也使用flex布局,在 flex容器上设置 flex-direction: column (注意容器需要设置固定高度),即可垂直布局。

    块级元素有分为是否确定高度。如果确定高度,则在relative父元素内的absolute子元素中设置位移top为50%,margin-top则为高度的一半的负值。并且依据盒子模型,还有需要考虑padding和border的大小。而不确定高度的情况,就需要使用translateY来讲元素居中,{ top: 50%; transform: translateY(-50%); }。最后flex布局也是要给万金油方法,{ display: flex; flex-direction: column; justify-content: center; }。这个属性的设置还可以保持水平居中。

  3. 水平垂直居中

    结合上述两个方面的方法,可以总结水平垂直居中的方法也有三种。

    • 知道宽高: 使用考虑容器宽高大小,将margin-top和marging-left设置原有宽高的一半,再通过位移移动到中间位置。{ margin: -{ 容器 / 2 } px 0 0 -{ 容器 / 2 }px; top: 50%; left: 50%; },这里只考虑了W3c模型,IE模型还需将border大小考虑进来。
    • 不知道宽高: 设置样式 { top: 50%; left: 50%; transform: translate(-50%, -50%); } 即可。
    • 万金油flex: 设置样式 { display: flex; flex-direction: column; justify-content: center; } 即可。

实践

题目要求水平垂直方向都居中并且知道宽高,我就使用了第一种方法。而只有在absolute定位下才能使用百分比高度。

.content {
    position: absolute;
    background-color: #ccc;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}

其容器样式元素结果如下图。

而两个四分之一圆需要使用圆角边框border-radius设置,其设置单个半径的语法为 border-radius: top-left top-right bottom-right bottom-left。左上角的圆半径应该设置在第三个值上,并且元素的位移应该设置为top和left为零来贴合到容器边框上。

.leftquarter {
    top: 0;
    left: 0;
    -moz-border-radius: 0  0 50px 0; /* 四分之一圆 */
    -webkit-border-radius: 0  0 50px 0;
    border-radius: 0  0 50px 0;
}

同理,右下角的圆半径一个设置在第一个值上,并将其贴合在容器的右下角。

.rightquarter {
    right: -350px;
    bottom: -100px;
    -moz-border-radius: 50px 0 0 0; /* 四分之一圆 */
    -webkit-border-radius: 50px 0 0 0;
    border-radius: 50px 0 0 0;    
}

当然,他们继承一个公共样式position: relative,以设置元素的位移。

.element { position: relative; background-color: #fc0; height: 50px; width: 50px; }

结果如下图,无论浏览器窗口怎么变化,元素始终居中。

demo地址

参考:

居中方法详解

CSS制作图形速查表