html垂直居中标签的设置方法(html图片垂直居中怎么设置)

flex方法

首先给图片添加一个div，设置其宽高及基本属性，其次把div中的display元素设置成flex，最后给img添加align-items:center属性，代码如下：

<span><!DOCTYPE <span>html</span>></span><span><<span>html</span> <span>lang</span>=<span>\"en\"</span>></span><span><<span>head</span>></span>    <span><<span>meta</span> <span>charset</span>=<span>\"UTF-8\"</span>></span>    <span><<span>meta</span> <span>name</span>=<span>\"viewport\"</span> <span>content</span>=<span>\"width=device-width, initial-scale=1.0\"</span>></span>    <span><<span>title</span>></span>Document<span></<span>title</span>></span>    <span><<span>style</span> <span>tpye</span>=<span>\"text/css\"</span>></span><span>         <span>body</span>{             <span>background</span>:<span>#000</span>        }        <span>div</span>{            <span>width</span>: <span>900px</span>;            <span>height</span>: <span>800px</span>;            <span>background</span>:deeppink;            <span>display</span>: flex;            <span>align-items</span>: center;        }        <span>div</span> <span>img</span>{            <span>width</span>: <span>579px</span>;            <span>height</span>: <span>282px</span>;            <span>align-items</span>: center;        }    </span><span></<span>style</span>></span><span></<span>head</span>></span><span><<span>body</span>></span><span><<span>div</span>></span>    <span><<span>img</span> <span>src</span>=<span>\"html.png\"</span> <span>alt</span>=<span>\"\"</span>></span><span></<span>div</span>></span><span></<span>body</span>></span><span></<span>html</span>></span>

看下效果

display方法

首先创建一个div，以及对有图片的div设置样式，给img的父级添加一个diaplay，并且属性为table，并且把包含图片的div中的display属性设置成table-cell，最后给有图片的div设置成vertical-align: middle; 属性，代码如下：

<span><!DOCTYPE <span>html</span>></span><span><<span>html</span> <span>lang</span>=<span>\"en\"</span>></span><span><<span>head</span>></span>    <span><<span>meta</span> <span>charset</span>=<span>\"UTF-8\"</span>></span>    <span><<span>meta</span> <span>name</span>=<span>\"viewport\"</span> <span>content</span>=<span>\"width=device-width, initial-scale=1.0\"</span>></span>    <span><<span>title</span>></span>Document<span></<span>title</span>></span>    <span><<span>style</span> <span>tpye</span>=<span>\"text/css\"</span>></span><span>        <span>body</span>{            <span>background</span>: <span>#bbb</span>;        }        <span>div</span>{            <span>display</span>: table;            <span>width</span>: <span>900px</span>;            <span>height</span>: <span>700px</span>;            <span>background</span>: <span>#f3f3f3</span>;            <span>display</span>: table-cell;            <span>vertical-align</span>: middle;        }        <span>div</span> <span>img</span>{            <span>width</span>: <span>282px</span>;        }    </span><span></<span>style</span>></span><span></<span>head</span>></span><span><<span>body</span>></span><span><<span>div</span>></span>    <span><<span>img</span> <span>src</span>=<span>\"html.png\"</span> <span>alt</span>=<span>\"\"</span>></span><span></<span>div</span>></span><span></<span>body</span>></span><span></<span>html</span>></span>

效果图：