css 实现水平垂直居中的三种常用方法

css 实现水平垂直居中的三种常用方法

首先基本结构样式

使里面的span元素（粉色圆点）水平垂直居中于其div父元素（淘宝色正方形）

实现的效果图如下：

下面是常用的三种方法：

1.定位

2.flex 设置主轴及侧轴方向居中

3.最简单，最直接，最牛逼

直接在子元素span下设置 margin : auto;即可

总结：

以上三种方法在我们的实际场景中经常会用到，所以我们要熟练掌握。

还有我个人建议使用后两种，不建议使用第一种，后两种简单，采用flex布局，避免用定位。