返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS 垂直居中的三种方法

时间:2019-11-21 11:53来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥
已知父元素是块级元素(block),现要让子元素在父元素中垂直居中。
第一种:父元素设置高度和行高,并且使高度与行高相等(height = line-height);子元素不设置高度和行高,代码如下:
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.    <title>Document</title>
8.    <style>
9.        div {
10.            background: grey;
11.            height: 40px;
12.            line-height: 40px;
13.        }
14.    </style>
15.</head>
16.<body>
17.    <div>
18.        <span>
19.            Hello World!
20.        </span>
21.    </div>
22.</body>
23.</html>
第二种:父元素不设置高度和行高;子元素设置行高,不设置高度和行高,代码如下:
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.    <title>Document</title>
8.    <style>
9.        div {
10.            background: gray;
11.            
12.        }
13.        span {
14.            line-height: 40px;
15.        }
16.    </style>
17.</head>
18.<body>
19.    <div>
20.        <span>
21.            Hello World!
22.        </span>
23.    </div>
24.</body>
25.</html>
第三种:父元素不设置高度, 设置行高;子元素不设置高度和行高,代码如下:
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.    <title>Document</title>
8.    <style>
9.        div {
10.            background: gray;
11.            line-height: 40px;
12.        }
13.    </style>
14.</head>
15.<body>
16.    <div>
17.        <span>
18.            Hello World!
19.        </span>
20.    </div>
21.</body>
22.</html>
------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
猜你感兴趣