怎么让一张图片在网页中居中显示

今天我爱编程网小编整理了怎么让一张图片在网页中居中显示相关内容，希望能帮助到大家，一起来看下吧。

本文目录一览：

• 1、【web前端】十分钟彻底弄懂 flex 布局
• 2、怎么让一张图片在网页中居中显示
• 3、网站前端开发常用的布局方式有哪些

【web前端】十分钟彻底弄懂 flex 布局

flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。

使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。

主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。

item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。

注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。

flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。

flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。

它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。

决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：

决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：

决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：

决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：

该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：

item 的属性在 item 的 style 中设置，item 共有如下六种属性：

order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。

它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。

定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。

表示 item 在主轴上占据的空间，默认值为 auto。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。

align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。

怎么让一张图片在网页中居中显示

一、传统HTML让图片横向水平居中方法

直接在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。 我爱编程网

align="center"使用方法：

<divalign="center"></div>

align="center"居中图片DIV+CSS实例代码：

htmlalign="center"图片居中实例截图

二、CSS让图片中DIV对象内水平居中

1、实例HTML+CSS完整代码如下：

2、水平居中实例截图

无论文字居中、图片居中等内容居中，都可以使用以上两种方法实现，一般推荐使用CSS进行，但网页多时候，只需要修改CSS文件里对应一处选择器样式即可修改内容居中、居左、居右。

网站前端开发常用的布局方式有哪些

实现网页布局的方式方法比较多，布局方式可以大概分为这几类。

布局种类：

1、table布局（网页的兴起，1995）

2、Flash布局（自由的黄金时代，1996）

3、div+css（CSS的诞生，1998）

4、栅格与响应式（移动端的兴起，2007与2010）

当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。

Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。

以上就是怎么让一张图片在网页中居中显示全部内容，更多相关信息，敬请关注我爱编程网。