div的水平居中和垂直居中
div是html中的一个标签,一般称之为盒子。有宽度、有高度,是可以存放内容的一个区域。但是如何让div在页面上以水平或者垂直的方式居中呢? 1.div水平居中 div水平居中其实很简单,只要使用到margin中的auto就能实现。代码如下: <html> <head> <title>div水平居中</title> <style> .horizontal{ width:800px; height:300px; background: #ff6a00; margin:100px auto; /*100px是div的上下边距,auto表示左右边距自适应(即水平居中)*/ } </style> </head> <body> <div class="horizontal"> 我是水平居中的div </div> </body> </html> 2.div垂直居中 div垂直居中的方法一般是使用absolute定位(绝对定位)的方式来实现的。代码如下: <html> <head> <title>div水平垂直居中</title> <style> .divbox{ width:500px; height:300px; line-height:300px; text-align:center; background:#ccc; position:absolute; left:50%;