.center { display: flex; justify-content: center; align-items: center; }
上面的代码是实现在框中间的CSS样式,其中display: flex
是设置显示方式为Flex布局,justify-content: center
是设置水平方向的居中对齐,align-items: center
是设置垂直方向的居中对齐。
当然,使用Flex布局实现不仅仅只能让文本或者图片在框中间,还可以实现很多其他布局方式。不过可以看到,使用Flex布局的代码很简单,只需要加上以上几个样式,就可以实现在框中间。
当然,上面的代码只是实现文本或者图片在框中间的方法之一,还有很多其他实现方式,比如使用相对定位等。这里只介绍一种简单易懂的方法,希望对于网页设计者有所帮助。