关于html居中的几种方式

1  一个div中是一个块级元素

<style type="text/css">
　　.div1{ 200px;

　　height: 200px;

　　background: red;

　　overflow: hidden;}
　　.div2{ 100px;

　　height: 100px;

　　background: green;

　　margin: 50px auto}
</style>

<div class="div1">

　　<div class="div2"></div>

</div>

上下垂直居中就是50px，计算方法（div1的宽度减去div2的宽度）/2，auto实现左右居中，div1一定要加overflow:hidden;不然就会和右图一样，这根margin的特性有关。

2  外层是一个div里面是内联元素

　　1>   如果里面只有一行文字　

　　　　.div3{ 200px;height: 40px;margin:50px;line-height: 40px;background: blue;text-align: center; }　　　

　　　　<div class="div3">
　　　　　　大家好我是DJL箫氏
　　　　</div>

水平居中用的text-align: center;垂直居中line-height：外层div高度。（注意只是用里面只有一行文字）

　　2>在网上看见贴在这（原文地址：http://blog.cssforest.org/2007/01/22/%E5%86%85%E5%AE%B9%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD.html）

/* @reset */
body{background-color:#FFFFFF;}

/* ==== demo ==== */
.holder {
740px;
height:200px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*以下样式针对IE*/
.edge {
0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.container {
vertical-align:middle;
display:inline-block;
}

<div class="holder">
　　<!--[if IE]><span class="edge"></span>
　　<![endif]-->
　　<!--[if IE]><span class="container"><![endif]--><img src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" alt="Homework" title="Homework">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span>
　　<![endif]-->
</div>

注意：

HTML中IE条件注解部分的标签要用内联对象标签。

<!--[if IE]><span class="edge"></span><![endif]-->

要放在内容之前。如果放在之后，内容是中文时会不能居中。

垂直居中的5种方式：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

注：后续还会补充