1、flex布局的第一种方案:使用新的CSS特性，flex布局，这种流式布局方案在移动端非常好用。设置父元素的display属性为flex，然后align-atem居中。不需要设置子元素。看起来很简单..parent{width:600px;高度：300px；背景：红色；显示：弹性；证明内容：居中；对齐项目：居中；}.child{背景：绿色；}2。定位+变换第二种解决方案是基于定位和变换属性。首先，子元素绝对定位在父元素之上，使子元素的左上角水平居中垂直，因为子元素的宽高未知，所以将margin向左上移50%本身，利用transform的translate属性完美解决..parent{width:600px;高度：300px；背景：红色；职位：相对；}.child{背景：绿色；位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}3.text-align+inline-block根据inline-block的属性实现方案三。水平居中法可能不需要过多介绍。所有主流浏览器都支持text-align属性，只需要取值中心即可；代码比较简单，但是对于inline-block造成的间距问题会影响复杂的布局..parent{width:600px;高度：300px；背景：红色；文本对齐：居中；}.child{背景：绿色；display:inline-block;}其实也有一些使用floating方案和display:table方案也是可以的，但是个人认为以上三种方式还是被广泛使用的。前端开发的流程和兼容性问题是绕不过去的坎。总结并找到自己的解决方案才是最重要的。