大家知道divcss水平垂直居中对齐吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。这种方法将在需要给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)。这就意味着使用这种方法来实现垂直居中的效果，那么元素必须要有一个固定的高度。这样一来，你给元素设置了固定高度，如果你又给他设置了“overflow:auto”，那么当元素内容超过容器后，这样元素的就会出现滚动，而不会自适应内容的高度。

HTML Markup

复制代码代码如下:

CSS Code

复制代码代码如下:

.vertical {

height: 100px;/*元素的高度*/

position: absolute;

top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/

margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/

}

优点：

能在各浏览器下工作，结构简单明了，不需增加额外的标签

缺点：

由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条(如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现)。

这种方法主要是针对多行元素来进行元素的垂直居中，而并非是此元素的内容垂直居中，这一点先要理解并分开清楚。另外此方法是通过绝对定位来实现的，那么用这种方法实现元素的垂直居中需要注意以下几点：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标;另外需要设置给元素明确定一个高度值并且给元素设置一个负值的margin-top，而且值为元素高度的一半。这里我建议大家给元素定一个宽度值，因为元素进行绝对定位后脱离文档流，其宽度是根据元素内容所占宽度来计算的，为这能让其视觉效果更好，最好给元素定义一个宽度值。

根据这种方法，我们稍作修改就能使元素不单是垂直居中，而且还可以水平居中，如：

HTML Markup

复制代码代码如下:

CSS Code

复制代码代码如下:

#wrap {

width: 200px;/*元素的宽度*/

height:200px;/*元素的高度*/

position: absolute;

left: 50%;/*配合margin-left的负值实现水平居中*/

margin-left: -100px;/*值的大小等于元素宽度的一半*/

top:50%;/*配合margin-top的负值实现垂直居中*/

margin-top: -100px;/*值的大小等于元素高度的一半*/

}

这种方法可以实现元素的水平垂直居中，常用于页面在最中间的布局，使用这种方法一定要把握住：水 平垂直居中的元素要有明确的大小(换句话说就是要有确切的宽和高度值);给元素进行绝对定位，并设置left,top值为“50%”(此处最好使用 对定位，如果只是单单水平居中，此处可以换成相对定位);最后设置margin-top和margin-left的负值，而且其值分别为元素高度和宽度的 一半。

相信大家已经学会divcss水平垂直居中对齐了吧!感谢大家对我们网站的支持!

相关推荐：

如何终止DIV的float属性呢