网站版权与免责声明
①由于各方面不确定的因素，有可能原文内容调整与变化，本网如不能及时更新或与相关部门不一致，请网友以权威部门公布的正式信息为准。
②本站注明稿件来源为其他媒体的文/图等稿件均为转载稿，本站转载出于非商业性的教育和科研之目的，并不意味着赞同其观点或证实其内容的真实性。
③本网转载的文/图等稿件出于非商业性目的,如转载稿涉及版权及个人隐私等问题,请作者在两周内邮件820921846@qq.com联系。
div实现水平居中只需要设置固定宽度和margin:0 auto即可， 给你2个解决方案: 1、条件是div的高度和宽度是固定的
让层垂直居中
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。 如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。 2、条件是div的高度和宽度是不固定的 如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了； 我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中； 解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了! 但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中p的行高和div的高度相等就行了。不好意思刚刚没看全题目可以在div中加一个空标签，如,
这类，具体参考代码如下：
如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就解决了水平居中。使用display:table-cell和设置了display:inline-block的线合span，这样就解决垂直居中。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<style>标签中，输入css代码：body{text-align:center;}，在<script>标签中输入js代码：vara=($(document).height()-$('form').height())/2;$('form').css('margin-top',a+'px');
3、浏览器运行index.html页面，此时form标签成功在页面中水平垂直居中了。
图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center;如果只能用图片分两种情况：
1.图片宽高固定，这种情况很简单。水平居中：就在图片的css中加 dispaly:block;margin:0 auto;垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。
2.图片高度未知，这个布局比较难实现。一般我是用js做的。水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto;垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。曾经研究过网上的很多方法，个人觉得这个是最有效的了。
一个比较简单的方法就是这样：
你们假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：
水平垂直居中
CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。也就是说，如果你的DIV是200PX高，那你就让line-height:200px;文字就会垂直居中了。
不知道说明白没有。不行，你再HI我好了。
字体水平居中
在CSS中，可以使用text-align属性来让文字水平居中。text-align属性规定元素中的文本的水平对齐方式，设置值为center则可实现文本文字水平居中对齐。
text-align属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
1.单行文本是通过设置父元素的 height 和 line-height 高度一致来完成的，其中height是指元素的高度, line-height 是指行间距。
案例：
写一个<div>我是单行文本，我想垂直居中</div>
效果如图：
2.在<style>中加入CSS样式
<style type="text/css">
div{
height: 200px;
line-height:200px;
background: #3fc;
}
</style>
结果如图:
3.父元素的高度确定，table标签包裹然后设置vertical-align：middle
案例：
写三个<p> 我是多行文本1，我想垂直居中</p>
<p> 我是多行文本2，我想垂直居中</p>
<p> 我是多行文本3，我想垂直居中</p>
效果如图：
4.table（因为td 标签默认情况下就默认设置了 vertical-align 为 middle。所以不用重新再写 vertical-align:middle）标签包裹代码设置和效果图如下：
我们这里分为两种形式，一种是定元素宽高的情况下，另一种是不定元素宽高的情况下。
定元素宽高的情况下
a.绝对定位 + 负margin
利用绝对定位absolute和margin完成元素居中，具体例子如下：
给父元素添加相对定位，子元素添加绝对定位，利用margin负子元素宽高的一半，实现元素的居中，这种方法不常用，
优点：好理解，兼容性好
缺点：必需给定子元素的宽高
b.绝对定位+margin:auto
利用absolute绝对定位和margin:auto自动居中方法完成元素的居中，例子如下：
与上例子一样给父元素加相对定位，子元素添加绝对定位，在设置元素的左、右、上、下位置为零，再利用自动居中对齐的方法margin:auto,完成元素的垂直水平居中，这种方法常用
优点：简单易懂，兼容性好
缺点：代码量大，占内存
c.table-cell
利用css的table属性，完成元素的垂直居中，margin完成元素的水平居中，例子如下
设置父元素的元素类型为table-cell类型，设置表格的垂直对齐方式为居中，再给子元素添加margin:0 auto 完成元素的垂直水平居中，这种方法不常用，
优点：兼容性好
缺点：出来的太早，现在都不流行用了
d.translate
利用2d位移来完成元素的居中，例子如下：
只需操作子元素，给子元素添加transform属性，利用2d位移translate,分别向左向右移动父元素宽高度减自身宽高度的一半，完成元素的垂直水平对齐，这种方法不常用，
优点：代码简单
缺点：我们必须给定子元素的宽和高，否则无法完成元素居中
不定元素宽高的情况下
line-heght
给元素设置line-heght,也就是行高，完成元素的居中，具体例子如下：
我们给子元素设置行高，完成元素的垂直居中，再然后利用文本水平对齐方式text-align方法，完成水平居中，这中方法是最简单的，也是我们经常用的
优点：写起来简单，兼容性好
缺点：只适合单行文本的居中，多行文本不支持
b.绝对定位加translate
之前我们说过一个利用translate完成元素垂直水平的，这里就是在那种方法上的进一步改进，也就是可以，不用设置宽高，也能实现元素的垂直水平居中，用translate加绝对定位完成元素的居中，例子如下：
在这里，还有不同就是，我们translate里面可以直接用百分比完成位移，从而实现元素的垂直水平居中，这种方法常用（但是我不常用）
优点：代码简单，兼容性好
缺点：无
c.flex
flex形成弹性盒，我们利用弹性盒可以做很多事情，其中最主要的还是布局，当然这里我们就不详细说了，我们来谈谈如何使一个元素垂直水平居中，例子如下：
我们让父元素形成弹性盒子，再然后设置主轴对齐方式为居中对齐，侧轴对齐方式为居中对齐从而完成元素的垂直水平居中，这种方法经常用，
优点：代码简单易懂
缺点：PC端兼容性不好
d.flex+margin:auto
这种方法与上面那种不同的是，这里没用到弹性盒子里面的属性，而是用margin直接完成元素的居中对齐，例子如下：
让父元素形成弹性盒子，再然后给子元素添加margin:auto,完成元素的垂直水平居中，这种方法也常用，
比如下面的例子， <tr align="left" valign="middle"><td>...</td></tr> align 为设置文本对齐（水平对齐），即控制水平方向的位置，可以设置：left（居左）、right（居右）、center（居中）、justify（调整宽度对齐，如果无效则居中）； valign 为设置垂直对齐，即控制竖直方向的位置，可以设置：top（对齐顶端）、middle（居中）、bottom（对齐底端）、baseline（对齐文字基线）。