DayDay's Studio.

居中图片的多种姿势

css 前端 html
字数统计: 638阅读时长: 2 min
2020/10/26 Share

居中图片的多种姿势

集合目前能想到的居中图片的做法并区分

通过 margin 实现

实现方式

将 <img> 包在 <div> 中, 然后设置 <div> 的样式如下:

1
2
3
4
div {
    width: 1000px; // 图片大小
    margin: 0 auto;
}

效果

  1. 当视窗宽度大于 <div> 宽度时, 图片完全显示, 且图片呈现为居中状态
  2. 当视窗宽度小于等于 <div> 宽度时候, 图片部分显示, 且显示的部分也不是图片中间部分

通过 text-align 实现

实现方式

通过设定 <img> 父元素的 text-align css 样式为 center 实现:

1
2
3
body {
    text-align: center;
}

效果

  1. 当视窗宽度大于 <img> 宽度时, 图片完全显示, 且图片呈现为居中状态
  2. 当视窗宽度小于等于 <img> 宽度时候, 图片部分显示, 且显示的部分也不是图片中间部分

通过 flex 实现

实现方式

将 <img> 父元素设定为 flex box实现, 具体 css 如下: 

1
2
3
4
body {
    display: flex;
    justify-content: center;
}

效果

  1. 当视窗宽度大于 <img> 宽度时, 图片完全显示, 且图片呈现为居中状态
  2. 当视窗宽度小于等于 <img> 宽度时候, 图片依然完全显示, 但是图片会等比例缩小

通过 background 实现

实现方式

图片设置为 div 的背景图片, 并将其设置为居中, 具体 css 如下:

1
2
3
4
5
div {
    width: 100%; // 整个视窗的宽度
    height: 650px; // 图片的高度
    background: url(./product3.jpg) no-repeat center
}

效果

  1. 当视窗宽度大于 <img> 宽度时, 图片完全显示, 且图片呈现为居中状态
  2. 当视窗宽度小于等于 <img> 宽度时候, 图片部分显示, 显示部分始终为图片的中间部分!

通过 position 实现

实现方式

将图片左移自身宽度一半的距离, 然后在向右移动视窗一半的距离, 具体 css 如下:

1
2
3
4
5
img {
	margin-left: -500px; // 图片宽度的一半
	position: relative;
	left: 50%; // 百分比基准值为视窗相等的值
}

效果

  1. 当视窗宽度大于 <img> 宽度时, 图片完全显示, 且图片呈现为居中状态
  2. 当视窗宽度小于等于 <img> 宽度时候, 图片部分显示, 显示部分始终为图片的中间部分!

总结

就目前来看, 实现图片居中的最好方式, 是使用 position 或 background 实现!

实验文件

原文作者：DayDay

原文链接：https://trcat.github.io/2020/10/26/%E5%B1%85%E4%B8%AD%E5%9B%BE%E7%89%87%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%A7%BF%E5%8A%BF/

发表日期：October 26th 2020, 10:17:20 pm

更新日期：December 13th 2021, 10:35:58 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 居中图片的多种姿势
    1. 1.1. 通过 margin 实现
      1. 1.1.1. 实现方式
      2. 1.1.2. 效果
    2. 1.2. 通过 text-align 实现
      1. 1.2.1. 实现方式
      2. 1.2.2. 效果
    3. 1.3. 通过 flex 实现
      1. 1.3.1. 实现方式
      2. 1.3.2. 效果
    4. 1.4. 通过 background 实现
      1. 1.4.1. 实现方式
      2. 1.4.2. 效果
    5. 1.5. 通过 position 实现
      1. 1.5.1. 实现方式
      2. 1.5.2. 效果
    6. 1.6. 总结
Total : 20
2021
2020
Apple Music iPhone css 前端 echarts Git 搬运 SVG WebFont 工具 javascript es6 react-native react html svg canvas jquery vue 转载 欢迎
手机应用 计算机技术 闲谈 置顶