首先需要明确一点,CSS全局居中是针对块级元素的,而行内元素是不能进行全局居中的,如果需要使行内元素居中,需要先将其转换为块级元素。
span{ display:inline-block; }
接下来大家来看具体的代码实现。首先是用flexbox方式实现:
body{ display:flex; justify-content:center; align-items:center; }
此处的flexbox方式使用了display:flex属性,它可以让容器内的元素沿主轴方向排列,justify-content:center可以使子元素在主轴方向上居中,align-items:center可以使子元素在侧轴方向上居中。
如果你想要用传统的position+transform方式实现全局居中,可以用下面的代码:
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
这种方式使用position:absolute属性,设置top和left的值都为50%,然后由于元素自身宽度和高度的影响使得元素只能在左上角接触到父级元素边框,因此需要使用transform:translate属性来调整元素的位置。
总之,CSS全局居中对于布局设计非常有用处,而想要实现全局居中,大家可以采用flexbox方式或者传统的position+transform方式。以上两种方式都值得大家掌握。