任务目标

使用CSS绝对定位实现登陆页面表单的居中

任务要求

使用绝对定位的方式实现登陆页面中的主要内容元素在页面水平居中且垂直居中。

效果图如下：

任务实施

（1）将确定的表单内容区域进行绝对定位，但不设定相关四个方向上的偏移量设定。

（2）在为以绝对定位的元素设定四个方向的外边距为auto。这是在不使用js或flex弹性布局的时的一种绝对定位的特殊用法。

教学微课

教学课件

扩展实践

制作用户头像昵称右上角角标消息提醒，如下图，相关参数不做规定限制。

能量贴士

知之为知之，不知为不知，是知也。语出《论语》。