利用CSS，如何把宝姐居中显示？

作为一个前端开发者，使用 CSS 使元素居中，大家都写过，而且不止一次的那种，本文就通过一个案例，为大家介绍几个图片居中方案，看看你学废了吗？

需求如下

通过CSS代码，将宝姐居中显示

html代码

<div class="container">
  <img class="img" src="https://s1.ax1x.com/2022/07/28/v9ww4O.jpg" alt="">
</div>

css代码

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

原始效果

解决方法

1、absolute + margin auto

通过设置absolute，然后将所有方向的距离设置为 0 ，利用margin: auto来达到目的。它的兼容性好，不过需要知道子元素的宽高

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    position: relative;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

2、flex(推荐)

个人认为最常见的一个解决方案，无须知道子元素的宽高，无须对子元素进行操作

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    display: flex;
    align-items: center;
    justify-content: center;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
}

3、grid

类似flex ，无须知道子元素的宽高，需要同时对父子元素进行操作

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    display: grid;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
    align-self: center;
    justify-self: center;
}

4、absolute + (-margin)

看起来不是很棒，和第1种方案有点差不多，也需要知道子元素的宽高，不过兼容性好

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    position: relative;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
}

5、absolute + calc

对上面的上面方案的升级，利用了css3的计算属性，依赖于calc的兼容性，也需要知道子元素的宽高

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    position: relative;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
}

6、absolute + transform

除了计算属性，我们还可以使用transform来实现，这种方式就不用知道子元素的宽高，也比较方便！

.container {
    width: 800px;
    height: 600px;
    border: solid 1px #e3c1a9;
    border-radius: 30px;
    /* add */
    position: relative;
}

.img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* add */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

总结一下

本文介绍到此结束，有人想通过display: table-cell来进行实现，如下：

display: table-cell;
text-align: center;
vertical-align: middle;

以上方案留给各位大佬想办法，不过那个vertical-align属性比较特别，期待你的表现