12345678910111213141516171819202122232425262728293031323334353637383940 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>设置第三方基准</title>
- <style>
- #box {
- width: 300px;
- height: 300px;
- background: #ddd;
- }
- #base {
- height: 50%;
- background: orange;
- }
- #child {
- height: 100px;
- background: rgba(131, 224, 245, 0.6);
- margin-top: -50px;
- }
- </style>
- </head>
- <body>
- <h1>设置第三方基准</h1>
- <p>
- 这种方式也非常简单,首先设置一个高度等于父元素高度一半的第三方基准元素,这时该基准元素的底边线就是父元素纵向上的中分线,做完这些之后再给要垂直居中的元素设置一个 margin-top 属性,值的大小是它自身高度的一半取负,则实现垂直居中。
- </p>
- <div id="box">
- <div id="base"></div>
- <div id="child"></div>
- </div>
- </body>
- </html>
|