任务目的
- 实践HTML/CSS布局方式
- 深入了解position等CSS属性
任务描述
-
实现如下示例图的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
达成度
- github源码
- 查看 demo1，实现方式：主元素利用绝对定位以及负外边距，里面圆形元素采用相对定位。
- 查看 demo2，实现方式：主元素利用绝对定位以及transform调整位置，里面圆形元素采用相对定位。
- 查看 demo3，实现方式：需要由外界容器，容器里面设置成
display:flex以及其他居中属性，里面圆形仍采用相对定位。
一个元素如何居中？查看原文请移步Centering in CSS: A Complete Guide
水平居中
- block元素的
margin: 0 auto实现原理：上下边距为0，左右边距设置为auto时，这个元素在水平方向上会撑满整个页面，而在block元素设置里宽度以后，撑满页面的就会变成其外边距，从而达到居中的效果。 - inline元素的
text-align:center实现原理：其css属性规定了inline元素可以会自动居中。同理，当存在多个inline元素时，会按从左到右的顺序排列再居中。
垂直居中
- inline元素的等内边距
padding-top==padding-bottom，上下两边的内边距相等，则中间内容居中* inline元素的行高line-height==height，行高与容器高度相等，则中间内容居中 - inline元素的
vertical:middle实现原理:css属性垂直居中文字，vertical有多个属性可选，默认是baseline属性 - block元素利用绝对定位以及负外边距，适用于知道元素的宽度和高度，兼容性好，参照下图，注意这里的外边距减去的是block元素宽度的一般，即
margin:-（width/2） px
-
block元素利用绝对定位以及transform，适用于不知道元素的宽度盒高度，参照下图
- block元素在外部的容器，将其设置为下图，则子元素block元素垂直居中
.parent {
display: flex;
align-items: center;
}
水平垂直居中
- 在垂直居中的基础上，block元素的三种方法均能演变为水平垂直居中，前两种只需增加
left属性以及margin-left或者transformX当中的一个属性达到目的* 利用flex的话，添加多一个justify-content: center;即可
