CSS不限宽高的居中方式（9种最全）

9 种方法呈现

1、flex
大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
 
.wrapper {
   
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
   
    display: flex;
    justify-content: center;
    align-items: center;
}
 

2、flex + margin
这是 flex 方法的变种。父级元素设置 flex，子元素设置 margin: auto;。可以理解为子元素被四周的 margin “挤” 到了中间。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
 
.wrapper {
   
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
​
    display: flex;
}
​
.wrapper > p {
   
    margin: auto;
}

3、transform + absolute
这个组合，常用于图片的居中显示。

<div class="wrapper">
    <img src="test.png">
<