28、HTML与CSS：页面布局与样式设计

HTML与CSS：页面布局与样式设计

1. 元素居中技巧

在网页布局中，元素的居中显示是一个常见需求，可分为水平居中和垂直居中两种情况。

1.1 水平居中

对于内联元素，可使用 text-align: center; 实现水平居中。但对于块级元素，此方法只能使块内内容居中，若要让整个块级元素水平居中，需将左右外边距设为 auto ，同时要定义块级元素的宽度。示例代码如下：

p {
    margin: 10px auto;
    width: 600px;
}

1.2 垂直居中

目前没有直接的 CSS 样式能实现块级元素的垂直居中，但有几种变通方法：
- 利用表格单元格特性 ：创建一个容器元素，将其显示为表格单元格，并设置 vertical-align: middle; 。示例代码如下：

<div>
    <h1>Cycle Pathology</h1>
</div>

div {
    display: table-cell;
    vertical-align: middle;
}

不过，此方法在 IE8 之前的版本中不适用。
-