服务购

　　如今，各种互联网的Web应用开发工具层出不穷，让许多 Web应用开发工作者目不暇接。那么如何才能够快速入门，成长为一名专业的Web应用开发工作者呢？通过接下来小编向大家介绍的关于Web开发中让盒子居中的四种方法，希望大家能够找到答案。

　　代码演示(html使用同一个Demo)：

　　html Demo：

　　1.0、margin固定宽高居中(演示)

　　这种定位方法纯粹是靠宽高和margin拼出来的，不是很灵活。

　　CSS：

　　#container {

　　width: 600px;

　　height: 500px;

　　border: 1px solid #000;

　　margin: auto;

　　}

　　#box {

　　width: 200px;

　　height: 200px;

　　margin: 150px 200px;

　　background-color: #0ff;

　　}

　　2.0、负margin居中(演示)

　　利用负的margin来进行居中，需要知道固定宽高，限制比较大。

　　CSS:

　　#container {

　　position: relative;

　　width: 600px;

　　height: 500px;

　　border: 1px solid #000;

　　margin: auto;

　　}

　　#box {

　　position: absolute;

　　width: 200px;

　　height: 200px;

　　left: 50%;

　　top: 50%;

　　margin: -100px -100px;

　　background-color: #0ff;

　　}

　　3.0、绝对定位居中(演示)

　　利用绝对定位居中，非常常用的一种方法。

　　CSS:

　　#container {

　　position: relative;

　　width: 600px;

　　height: 500px;

　　border: 1px solid #000;

　　margin: auto;

　　}

　　#box {

　　position: absolute;

　　width: 200px;

　　height: 200px;

　　left: 0;

　　top: 0;

　　right: 0;

　　bottom: 0;

　　margin: auto;

　　background-color: #0ff;

　　}

　　4.0、table-cell居中(演示)

　　利用table-cell来控制垂直居中。

　　CSS:

　　#container {

　　display: table-cell;

　　width: 600px;

　　height: 500px;

　　vertical-align: middle;

　　border: 1px solid #000;

　　}

　　#box {

　　width: 200px;

　　height: 200px;

　　margin: 0 auto;

　　background-color: #0ff;

　　}

　　以上就是小编向大家介绍的关于Web开发中让盒子居中的四种方法的全部内容了，希望大家在看完之后能够有所帮助。如果大家想要观看更多关于Web开发中让盒子居中的四种方法的相关内容，可以到猪八戒网服务购的行业资讯进行查看。