图片居中怎么设置 css
时间: 2023-06-19 20:06:23 浏览: 58
可以使用以下 CSS 代码将图片水平和垂直居中:
```css
img {
display: block; /* 确保图片不是行内元素 */
margin: 0 auto; /* 水平居中 */
text-align: center; /* 垂直居中 */
}
```
或者使用以下 CSS 代码只居中图片的垂直方向:
```css
img {
display: block; /* 确保图片不是行内元素 */
margin: 0 auto; /* 水平居中 */
}
img {
position: relative; /* 相对定位 */
top: 50%; /* 向上移动 50% 的距离 */
transform: translateY(-50%); /* 向上移动自身高度的一半,即垂直居中 */
}
```
以上代码中,第一段代码实现水平居中和垂直居中,第二段代码仅实现垂直居中。可以根据实际情况选择使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![dll](https://img-home.csdnimg.cn/images/20210720083646.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)