- <!DOCTYPE html>
- <HTML>
- <body>
- <style>
- .title { font-size: 18px; } .container { background-color: lightblue;
- width: 300px; height: 300px; } .content { font-size: 16px; font-weight:
- 600; }
- </style>
- <h1 class="title">
- table
- </h1>
- <section class="container" style="display:table-cell; vertical-align: middle;">
- <div class="content">
- 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本.
- 这里是一段高度未知的文本.
- </div>
- </section>
- <h1 class="title">
- grid
- </h1>
- <section class="container" style="display:grid; align-items: center;">
- <div class="content">
- 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本.
- 这里是一段高度未知的文本.
- </div>
- </section>
- <h1 class="title">
- transform
- </h1>
- <section class="container" style="position: relative;">
- <div class="content" style="position: absolute; top: 50%; transform: translateY(-50%);">
- 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本.
- 这里是一段高度未知的文本.
- </div>
- </section>
- <h1 class="title">
- flex
- </h1>
- <section class="container" style="display: flex; align-items: center;">
- <div class="content">
- 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本. 这里是一段高度未知的文本.
- 这里是一段高度未知的文本.
- </div>
- </section>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3299331.html