使用FLEX进行元素居中布局以及关于FLEX的小知识点 关于元素的居中,左右居中还是比较简单的 margin 0 auto 就OK了,但是上下居中真是有点难到小编了,以前使用的都是布局 top 50% 然后再往回减盒子高度,虽然能够实现居中布局,但是 如果盒子大小不定,那么就需要经常的进行计算,很不是方便,最近看视频的时候发现了这个好玩的属性,接下来就来介绍一下吧。 flex布局仅仅需要三行代码即可实现元素的上下 左右居中对齐: display: flex; justify-content: center; align-items: center; 多说无益 上代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> *{ margin: 0; padding: 0; } .container{ display: flex; justify-content: center; align-items: center; /*justify-content: flex-start;*/ /*默认居左*/