一个元素如何居中

任务目的

• 实践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;即可