CSS禅意花园阅读笔记二：居中显示

CSS禅意花园 Page86

1. 使用自动外边距实现居中

div #container {
    margin-left: auto;
    margin-right: auto;
    width: 168px;
}

注意，必须为容器指定宽度。

2. 使用text-align 实现居中

body {
    text-align: center;
}

这样所有body的子元素都被居中显示，然后需要附加条件：

p {
    text-align: left;
}

3. 组合使用自动外边距和文本对齐

body {
    text-align: center;
}
#container {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    width: 168px;
    text-align: left;
}

4. 使用负外边距

#container {
    position: absolute;
    left: 50%;
    width: 760px;
    margin-left: -380px;
}