第 19 题（让一个 div 水平垂直居中有几种方式（）） html

文章图片

实现上方效果，下面列举几个常用的方法，个人比较推荐用 flex 布局实现
方式 1（利用 margin 和绝对定位） html

css

.container { position: relative; width: 150px; height: 150px; background-color: #000; .box { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; background-color: #fff; } }

方式 2（利用 flex 布局） html

【第 19 题（让一个 div 水平垂直居中有几种方式（））】css

.container { position: relative; width: 150px; height: 150px; background-color: #000; display: flex; justify-content: center; align-items: center; .box { width: 50px; height: 50px; background-color: #fff; } }

文章的内容/灵感都从下方内容中借鉴