例：居中.wrapper里的.content
一. 已经元素的宽高的前提下：
(1) left:50%;top:50%
父元素设置相对定位，position: relative;
子元素(要居中的元素)设置绝对定位，position: absolute; left: 50%; top: 50%
图1 已知元素宽高
图2 示例图
（2）设置margin: auto;
父元素设置相对定位,position: relative;
子元素(要居中的元素)设置绝对定位，position: absolute; margin: auto
(3) flex布局
父元素设置 display: flex; justify-content: center; align-items: center;
二.未知元素宽高的情况下：
（1）四个方向设置值，把元素撑开
父元素设置相对定位，position: relative;
子元素设置绝对定位，position: absolute; top与bottom设置一样的值，left与right设置一样的值，把容器撑开
图3 未知元素宽高
图4 示例图
网友评论