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

CSS，如何把宝姐居中显示？"/>

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

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

需求如下

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

html代码

<div class="container"><img class="img" src=".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属性比较特别，期待你的表现