将一张图片放置在背景图上的居中方法 第一部分：在设置背景图时学到的东西：
1.在设置一个div时，如果用一张图作为这个div的背景时，会发现，这张图与设置div的大小不一致
2.当我没有给背景定义不平铺时background-repeat: no-repeat;这就会使图片显示不完整（超出或者缺失）。
加了不平铺的属性后，div中缺失的部分则会由空白填补。
此时我们则需要让图片自适应我们的div，加入如下代码
background-size:100% 100%;(当然也可以直接设置和div长度宽度保持一致)
第二部分：当我想把一张图放置在这个背景居中显示时，我又遇到了问题。
当我仅用text-align: center; 设置时发现，图片元素只能水平居中。而不能上下垂直居中。
通过查阅资料发现如下方法
方法1.使用line-height行高的方式设置图片居中
在外层div中设置 text-align:center;内层图片设置style=“line-height: 外层div高度”
<div style="width: 980px; height: 400px; background-color: yellow; text-align:center; margin: 0 auto;">
<div style="line-height: 400px;"><img src="images/syt.jpg" style="width: 100px;height: 100px;"></div>
</div>利用定义文本的方法来放置图片。用line-height定义行高等于整个div的大小，实现垂直居中，但是我在实际运用的时候发现如果行高等于div的高度并不能完全实现图片对齐居中，我想应该是图片和文字的区别吧，真正做到对齐需要将行高加大为上层div高度加图片高度一半的大小。
测试了一下，内层的图片可以不用设置框架也可以，把line-height可以直接放在上层div中。
参考：
ine-height的用法
方法2.使用padding属性设置标签内边距，设置图片居中
<img src="images/syt.jpg" style="width: 100px;height: 100px; padding: 100px 0;">使用padding属性设置图片上下内边距
panding的值为【（上层div高度-图片高度）/2】0；
方法3.把外层div转换成一个表格，内层图片转为单元格
利用display属性的值
table ：此元素会作为块级表格来显示
table-cell ： 此元素会作为一个表格单元格显示
来实现图片居中
css样式（部分代码）：
.ys{
display: table;
}
.qy{
display: table-cell;
vertical-align: middle;
}效果如下：
使外层div变为一个table型，把图片所在内层容器变为一个单元格用vertical-align属性设置垂直对齐。（直接定义table也可以达到一样的效果）
参考：
display:table和display:table-cell的妙用
方法4.使用position精确定位
.qy{
position: relative;
top: 100px;
}把图片放入div块中，然后使用相对定位，自定义图片的位置（这也是我第一个想到的方法，也最简单）
方法5.使用transform: translate(-50%,-50%)函数定位
.qy{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}把底层div设置为relative相对定位。再用top和left定位图片位置，但是此时我们定位的位置是图片左上角位于底层div的中心，我们是一张图片，当前不知道图片的大小，所以用transform: translate(-50%,-50%);属性使图片延x轴，y轴反向左上平移图片长和宽的一般，这样就完成了图片的定位。
可参考：transform用法
方法6.使用flex布局定义图片布局方式
只需要在上层div中加入
display: flex;
align-items: center;
justify-content: center; 思想是把div改变为弹性盒子布局方式（CSS3新特性）
用justify-conten和align-itemst属性定义主轴方向和交叉轴方向上的居中对齐方式。
参考：flex布局方式
补充vertical-middle用法特殊：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。所以一般在使用该属性时，在父div中再加入一个块级元素，并变为行内元素。将width设为0，height设为100%达到撑开本行的目的。
总结：以上提到的方法不单单是可以用来定位图片，有些也可用于文字的定位，总体
感觉最方便的就是方法四，当然五六也算常见，方法三有些地方也会遇到。
（小白总结，可能有些地方说的有出入，希望大牛多多指点）
Latex在同一figure中排版多张图片的方法
Latex在同一figure中排版多张图片的方法
主要使用了minipage（子图）语法。minipage可以嵌套，子图还可以分解为更多子图，功能很好玩，无聊可以自己试试。下面介绍几种常用效果的实现方法。
并排显示两张图，并分别标记
\begin{figure}[thbp!]
\centering
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/opencv-logo.png}
\caption{OpenCV的logo}
\label{fig:opencv_logo}
\end{minipage}
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/gdalicon_big.png}
\caption{GDAL的logo}
\label{fig:gdal_logo}
\end{minipage}
\end{figure}
上述代码的结果为：
特别需要注意的是，第一个minipage的宽度和第二个minipage的宽度之和不能超过1。如果超过一，则会自动变成垂直排列，如下图所示：
\begin{figure}[thbp!]
\centering
\begin{minipage}[t]{0.49\linewidth}% 注意！0.49
\centering
\includegraphics[width=0.9\linewidth]{figure/opencv-logo.png}
\caption{OpenCV的logo}
\label{fig:opencv_logo}
\end{minipage}
\begin{minipage}[t]{0.59\linewidth}% 注意！0.49+上面的0.59>1，导致自动重排版
\centering
\includegraphics[width=0.9\linewidth]{figure/gdalicon_big.png}
\caption{GDAL的logo}
\label{fig:gdal_logo}
\end{minipage}
\end{figure}
并排显示两张图，并只作一个标记\label
尝试下面的代码，figure/opencv-logo、figure/gdalicon_big为两张图片的相对路径，表示figure文件夹下的opencv-logo.png、gdalicon_big.png两张图片。则将其并排显示且整体标记的代码如下：
\begin{figure}[thbp!]
\centering
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/opencv-logo}
%\caption{第1个子图标题}
\end{minipage}
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/gdalicon_big}
%\caption{第2个子图标题}
\end{minipage}
\caption{并排安放两张图}
\label{fig:image_group}
\end{figure}
语法与上一节的类似，不同之处在于，对每个minipage都不使用\caption或\label，以免将其编号。
注意，如果在minipage包含的图片中也使用了\caption命令，则也会将minipage子图编号，如下图所示：
\begin{figure}[thbp!]
\centering
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/opencv-logo.png}
\caption{OpenCV的logo}
\end{minipage}
\begin{minipage}[t]{0.49\linewidth}
\centering
\includegraphics[width=0.9\linewidth]{figure/gdalicon_big.png}
\caption{GDAL的logo}
\end{minipage}
\caption{并排安放两张图}
\label{fig:image_group}
\end{figure}
那么，如何做到既标记子图，又不编号呢？
为子图增加说明文字，但不编号
实现这个效果需要用到tabular包。
\begin{figure}[thbp!]
\centering
\begin{tabular}{@{\extracolsep{\fill}}c@{}c@{\extracolsep{\fill}}}
\includegraphics[width=0.5\linewidth]{figure/opencv-logo.png} &
\includegraphics[width=0.5\linewidth]{figure/gdalicon_big.png}\\
(a)OpenCV的logo & (b)GDAL的logo\\
\end{tabular}
\caption{并排，但不标记子图}
\label{fig:image_with_table}
\end{figure}
在figure中嵌套一个两行两列表格，然后将两张图片插入第一行，两张图片的描述文字插入第二行，最后将整个figure作一次标签。效果如下所示：
另一个例子，将6张图片按321排版：
\begin{figure}[thbp!]
\centering
\begin{minipage}[t]{1.0\linewidth}
\centering
\begin{tabular}{@{\extracolsep{\fill}}c@{}c@{}c@{}@{\extracolsep{\fill}}}
\includegraphics[width=0.33\linewidth]{figure/opencv-logo} &
\includegraphics[width=0.33\linewidth]{figure/gdalicon_big}&
\includegraphics[width=0.33\linewidth]{figure/eigen_logo}\\
(a)OpenCV的logo & (b)GDAL的logo & (c)Eigen的logo\\
\end{tabular}
\end{minipage}
\begin{minipage}[t]{1.0\linewidth}
\centering
\begin{tabular}{@{\extracolsep{\fill}}c@{}c@{}@{\extracolsep{\fill}}}
\includegraphics[width=0.33\linewidth]{figure/vtk_logo} &
\includegraphics[width=0.33\linewidth]{figure/qt}\\
(d)vtk的logo & (e)Qt的logo\\
\end{tabular}
\end{minipage}
\begin{minipage}[t]{1.0\linewidth}
\centering
\begin{tabular}{@{\extracolsep{\fill}}c@{}@{\extracolsep{\fill}}}
\includegraphics[width=0.33\linewidth]{figure/vcpkg_logo}\\
(f)vcpkg的logo\\
\end{tabular}
\end{minipage}
\caption{3行，每行子图数不同，子图不编号}
\label{fig:image_with_table_321}
\end{figure}
代码中使用了3个minipage来分别完成3行图片的设置；每个minipage内嵌一个tabular来实现当前行子图的文字说明（不标记）；每个tabular的行数为2，第一行为子图、第二行为说明文字，列数为该行的子图数。
效果如下：
