前言

无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,及资料搜索,感觉以下三种方法是最优的解决方案,有需要的同学可以看看,相互交流,共同学习.

0. 以下三种方案的主题html结构如下:

   <div class="parent">
        <div class="child">
            子元素内容
        </div>
   </div>

1. flex布局

 第一种方案:使用CSS新特性,flex布局,这种流式布局方案在移动端上表现是非常棒的.将父元素display属性设为flex,然后align-atem居中,子元素不需要设置,看起来非常简单.

.parent{
  width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2. 定位+transform

第二种方案是根据定位和transform属性来实现的.首先子元素对父元素绝对定位,使得子元素左上角水平竖直居中,因为子元素是未知的宽和高,所以将margin按自身的50%,向上向左移动即可,使用transform的translate属性完美解决.

.parent{
  width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

第三种方案是根据inline-block的属性来实现的,对于该水平居中方法可能不需要太多的介绍，所有主流浏览器均支持 text-align 属性，只需要取值 center 即可；代码比较简单,但是对于inline-block造成的间距问题对复杂布局会有影响.

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

其实还有一些使用浮动的方案,以及display:table的方案也是可以实现的,只是个人觉得上述三种方法还是应用比较多的,前端开发的过程,兼容性问题是绕不过去的坎,多总结总结找到自己的解决方案才是最重要的.