CSS居中布局技巧-优快云博客

本文介绍了几种常用的CSS居中布局方法，包括水平居中、垂直居中等，并探讨了绝对定位对文档流的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用绝对定位元素水平居中

1.需要设置高度（高度已知）

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

2.CSS3（transform代替margin，不过浏览器对其支持度低 ie10以上，高度可以不设定）

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3.margin：0 auto居中（top、right、bottom、left均为0，高度可以不设定）

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

二、绝对定位对文档流影响

1、对其父元素设置一个高度

2、利用js判断

三、垂直居中

1、父元素高度不确定的文本、图片、块级元素的垂直居中

　　通过给父容器设置相同上下边距实现的，即设置padding-top和padding-bottom。

2、父元素高度确定的单行文本的垂直居中

　　通过给父元素设置line-height来实现，line-height值和父元素高度值相同。

3、父元素高度确定的多行文本、图片、块级元素的垂直居中

　　CSS中有一个用于垂直居中的属性vertical-align，但只有当父元素为td或者th时，这个属性才生效，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性，但ie6和ie7并不支持display:table-cell。

　　方法一：

　　直接使用table，因为td标签默认下就隐式设置了vertical-align:middle。

　　方法二：

　　对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的ie6和ie7，使用特定格式的hack。