图片居中可以通过HTML中的align属性来控制在图片的div中添加align=quotcenterquot在浏览器中再次打开这个页面文件，效果如下图片已经显示在中间我们还可以通过样式文件来实现图片的居中显示，这里我们以class选择器为例，为图片。

在html中将框内的文字既垂直居中又水平居中的操作步骤如下1首先创建一个盒子，并在中间输入文字信息2然后对盒子添加了边框颜色后，这时文字在左侧第1行位置3输入textalign 这个文字的对齐样式，然后在属性中输。

可以使用“textalign”属性让文字水平居中，使用“lingheight”属性让文字垂直居中1新建html文档，在body标签中添加div标签并填写一段文字，然后为这个div设置一些样式2为div添加“textalign”属性，属性值为“center。

方法一 设置盒子高度与lineheight相同，本方法适用于一行文字图片垂直居中 和一行文字对齐 用属性verticalalign 小图标和文字垂直对齐，小图标作为背景插入 attr设置自己生成的属性，像selected checked这类即使用鼠标。

3此时的效果如下图片在容器中，水平居中 第二，css图片垂直居中 1css代码如下，用flexlayout实现 2页面代码HTML如下 3此时的效果如下垂直居中 三css图片水平和垂直居中 1使用flexlayout实现css的水平和垂直居中。

1第一种css代码如图所示display设置成tablecell，textalign为center，垂直居中设置verticalalign为middle2打开浏览器查看结果，图片已处于正中状态3第二种方法css代码如图div设置成相对定位，img设置成绝对定位。

1利用margin 0 auto实现图片居中，就是在图片上加上css样式margin 0 auto 如下2设置imgBox的样式如下3此时的效果如下图片在容器内，水平居中二css图片垂直居中1css代码如下，使用flex布局实现2。

垂直是valign=quotmiddlequot，代码实例如下lttable width=quot1000pxquot border=quot1quot lttrlttd align=quotcenterquotltimg src=quotxxjpgquotlttdlttr lttable 上面的代码即设置图片水平居中，同理可以设置其垂直居中。

CSS3如何实现元素水平居中垂直居中 水平居中 行内元素 如果被设置元素为文本图片等行内元素时，水平居中是通过给父元素设置 textaligncenter来实现的 定宽块状元素 当被设置元素为块状元素时用 textaligncenter 就。

html垂直居中有4中方法分别有使用lineheight使用表格利用displaytablecell使用绝对定位具体实现方法使用lineheight 把文字的lineheight设为文字父容器的高度，适用于只有一行文字的情况可以让文字在父元素内。

CSS文字垂直居中CSS文字垂直居中代码如下！DOCTYPEhtmlPUBLICquotW3CDTDXHTML10TransitionalENquotquotDTDxhtml1transitionaldtdquothtmlxmlns=quothead。

1给网页中的ltbody style=“textaligncenter ”ltbody 标签中附加样式，textaligncenter就可以达到整个ltbody标签内文字居中的效果2ltbody 标签是控制整个html文档，如果不想全部都居中，可以给自己需要的。

5还有就是设置文字的垂直居中对齐了，可以根据不同的需要调整margin或者line值，这里使用的是行高将其设置为垂直居中，如图，行高的属性是lineheight，后面的属性值设置和父级的盒状标签高度相同，这样就可以做到文字垂直方向。

利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中结构代码同上CSS代码如下div width300px height150px backgroundcolor#eee paddingtop50px border#000 1px solid img。

后缀名 然后把文本文档后缀名改为html，如下图所示运行网页 然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示CSS代码 然后写上CSS代码，如下图所示垂直水平居中 可以看到。

CSS是层叠样式表下面，我们来看看怎么使用CSS让图片水平垂直都居中吧01 新建一张文档 在桌面新建一张文本文档，改名为1txt，如下图所示02。