> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 页面布局技巧

## 1、元素上下垂直水平居中

![水平垂直居中.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgIAAAErAgMAAADRYAM8AAAACVBMVEWt2OYgsqr///9sw/POAAAAlElEQVR42u3OsQ2AMADAsPAj/MfMlVzQoVOryt4jpW+xNwAAAAAAAAAAAAAAANjU9Qzcg8BBOSgH5aAclINyUA7KQTkoB+WgHJSDclAOykE5KAfloByUg3JQDspBOSgH5aAclINyUA7KQTkoB+WgHJSDclAOykE5KAfloByUg3JQDspBHXgAAAAAAAAAAAAAAADAnB+qRJPiwHN76AAAAABJRU5ErkJggg==)
相关代码：

```html title="HTML"
<div class="demo1">
    <div class="cont"></div>
</div>
```

```css title="CSS"
.demo1 {
    height: 300px;
    background-color: lightblue;
    /* 布局方式 */
    display: flex;
}

.demo1 > .cont {
    width: 100px;
    height: 100px;
    background-color: lightseagreen;
    /* 主要代码 */
    margin: auto;
}
```

## 2、导航条元素居右

![导航条居右.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgQAAAAzAgMAAACVjPg5AAAACVBMVEUgsqr////Yyp4jB7knAAABtklEQVRYw+2WXWojQQyEq0DzLsP0fTQwB+hA6z579O2f6W2vY0OSDiQPLWyjkQz6XCqB8Qc/HItgESyCRbAIFsEiWATPCQw2KgKMR8UIK72ZsMd0ECixuadHAoKJHrzlW5wj2NJRprQRCqZg/wiC5wb792TQmIO8cI5UexMhpwIE2gdFL4JekSdbMILOKxfMaSCq1gmCx0HQh7pfYz2Bff0EuaVmCGm9Lwf1Bro3FyjuCUo9DjeKlBfQGvT2IHWFIjNGFFwa6DuCUjOrhVAm3oiaG+v6mkySezMEDG8fIiBEaBa7D4KfZ/8FnNJAAPPmcUJxpWML9wQ7sHUCqHwTwZv7fl0cN498rYHKuAVPnYD0mHszWwAh7bbl1Raum8l91UZgwnDUPJTxOktAHiVNT2/haAURlTqpE6jUnETOpgjcgduOlxpQmv+T5UGoqDgLgbIT5N7sNR7ymkCIpsEdQcx5BIYGUwSq2MjhA3vYQkQrkKqbW3eiBPfuxNLDlyPkKfGGvRC4J9nP/zXY8vs6W7sXToeRtPbmQoYi5K/6h/KZWATAIgAWAbAIgEUALAJgEQCL4PvjLxhYWGDe0ZBBAAAAAElFTkSuQmCC)
实现代码：

```html title="HTML"
<div class="demo2">
    <li>首页</li>
    <li>动态</li>
    <li>话题</li>
    <li>活动</li>
    <!-- 登录&注册居右 -->
    <li>登录 &nbsp; 注册</li>
</div>
```

```css title="CSS"
.demo2 {
    list-style: none;
    background-color: lightseagreen;
    color: white;
    padding: 1em 0.5em;
    /* 布局方式 */
    display: flex;
}

.demo2 > li {
    padding: 0 0.5rem;
}

.demo2 > li:last-child {
    /* 主要实现代码 */
    margin-left: auto;
}
```

## 3、Loading 渐变动画效果

![loading渐变.mp4](/static/image/3-3.e3ad749a70.png)
实现代码：

```html title="HTML"
<body>
    <p class="loading">Loading...</p>
</body>
```

```css title="CSS"
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    text-align: center;
    background: #655;
    color: white;
}

.loading {
    margin: auto;
}

.loading:before {
    content: "";
    display: block;
    width: 4em;
    height: 4em;
    margin: 0 auto 1em;
    border: 1.5em solid;
    color: yellowgreen;
    box-sizing: border-box;
    animation:
        1s spin,
        0.7s radius,
        1.1s color,
        1.3s width;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes radius {
    50% {
        border-radius: 50%;
    }
}

@keyframes color {
    33% {
        color: orange;
    }

    66% {
        color: deeppink;
    }
}

@keyframes width {
    50% {
        border-width: 0.4em;
    }
}
```

## 4、Grid 栅格布局

![gird布局.png](data:image/png;base64,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)
实现代码：

```html title="HTML"
<div class="wrapper">
    <div style="background: red;">1</div>
    <div style="background: green;">2</div>
    <div style="background: blue;">3</div>
    <div style="background: darkturquoise;">4</div>
    <div style="background: orangered;">5</div>
    <div style="background: orchid;">6</div>
</div>
```

```css title="CSS"
.wrapper {
    width: 310px;
    height: 205px;
    border: 2px solid black;
    margin: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    /* grid栅格布局 */
    display: grid;
    /* 列宽：每个值对应一列 */
    grid-template-columns: 100px 100px 100px;
    /* 行高：每个值对应当前行的行高 */
    grid-template-rows: 100px 100px;
    /* 列与列之间的间隔宽度 */
    grid-column-gap: 5px;
    /* 行与行之间的间隔宽度 */
    grid-row-gap: 5px;
}
```

## 5、Grid 九宫格布局

![gird2布局.png](/static/image/3-5.b8301aa84f.png)
实现代码：

```html title="HTML"
<!-- display:grid;栅格布局 -->
<div id="wapBox">
    <img src="http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg" />
    <img src="http://pic27.nipic.com/20130302/8121700_084511016000_2.jpg" />
    <img src="http://pic32.nipic.com/20130817/13059650_160858753102_2.jpg" />
    <img
        src="http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg"
    />
    <img src="http://pic29.nipic.com/20130508/2501606_175156230000_2.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/b/55597435bb036.jpg" />
    <img src="http://img8.zol.com.cn/bbs/upload/23768/23767485.jpg" />
    <img src="http://pic27.nipic.com/20130220/8303153_123543678106_2.jpg" />
    <img src="http://pic22.nipic.com/20120801/2277142_100202030000_2.jpg" />
</div>
```

```css title="CSS"
#wapBox {
    border: 5px solid orangered;
    width: 310px;
    /* height: 205px; */
    margin: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    /* grid栅格布局 */
    display: grid;
    /* 列宽：每个值对应一列 */
    grid-template-columns: 100px 100px 100px;
    /* 行高：每个值对应当前行的行高 */
    grid-template-rows: 100px 100px;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

#wapBox img {
    width: 100px;
    height: 100px;
    display: block;
}
```