CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

刺骨的言语ヽ痛彻心扉 2022-02-20 08:25 220阅读 0赞

# 前言 #

> 无论是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的方案也是可以实现的,只是个人觉得上述三种方法还是应用比较多的,前端开发的过程,兼容性问题是绕不过去的坎,多总结总结找到自己的解决方案才是最重要的.