首页 > 代码库 > css中关于居中的那点事儿

css中关于居中的那点事儿

2024-11-24 15:01:39   203人阅读

 

　　关于居中，无论是水平居中，还是垂直居中都有很多方式，下面我来介绍一些常用的。

第一部分：水平居中

　　1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{text-align: center;}
        img{width: 200px;height: 200px;border: thin solid red;}
    </style>
</head>
<body>
    <div>
        <img src="http://www.mamicode.com/pic.png">
    </div>
</body>
</html>

　注意：对于某个块元素的居中，不能在其父元素的样式中设置text-align:center，这是无效的。下面介绍块元素的居中方式。

 

    2.实现块级元素的水平居中。

　　方法一：设置其左右两边的外补丁为auto。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 200px;height: 100px;background: red;margin:0 auto;}
    </style>
</head>
<body>
        <div>this is a div</div>
</body>
</html>

　　注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且div中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个div中的另一个div希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。

    方法二：使用绝对定位和负边距。

　　代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;<strong>position:relative;</strong> }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
           <strong> position: absolute; left: 50%; margin-left: -50px;<br>　          /*注意：因为绝对定位是left的值是相对于son的最左边为50%，所以需要使用margin-left再向左偏移宽度的一半  */<br></strong>
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>   
</body>
</html>

　　效果图如下：

技术分享

 

　　

第二部分：垂直居中

　　1.行内元素的垂直居中

　　　A　我们在写导航菜单时，往往采用将<a>标签写入float的<li>中，且为了美观，我们常常需要将a标签中的内容水平居中和垂直居中。水平居中我们在上面已经介绍了，通过在字体的父元素内设置text-align:center;即可实现。那么垂直居中呢？对于文字而言，我们只需要将行高设置为字体所在块元素的高度即可。

　　　　html代码如下：

1
2
3
4
5
6
7
8
9
<body>
    <ul>
        <li><a href="">我</a></li>
        <li><a href="">是</a></li>
        <li><a href="">导</a></li>
        <li><a href="">航</a></li>
        <li><a href="">的</a></li>
    </ul>   
</body>

　　     css代码如下：

1
2
3
4
5
<style>
    *{padding: 0;margin: 0;list-style: none;text-decoration: none;}
    ul li{float: left;/*width: 40px;height: 40px;*/}
    a{display: block;width: 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
</style>

　　 我把a标签的display属性值修改为了block，所以我们就可以修改a标签的宽度和高度了，因为li是包含a的，li会由其中的内容（即a标签）撑开，所以在li中的width和height是不需要设置的。

　　 因为a成为了块级元素，所以水平居中只需要在a中添加text-decoration:none;即可。将line-height的高度和height的高度设置为相同的，就可以实现垂直居中了。

   

    B 如果要对a标签中的字体居中，实际上还有一种更为简单的方法。

　　即将a的display属性设置位block之后，不设置其宽度和高度（li的宽度和高度也不设置），为了看清楚，我们可以给a加border，这时得到的效果图如下：

        技术分享

 

　　即a的大小完全是由字体撑开的，这时我们可以通过设置上下左右的padding值达到与A方法相同的效果。html代码与A中相同，css代码如下：

1
2
3
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;}
a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}

　　大家可以看到，这里我只设置了上下padding值为10px，左右padding值为30px;在A中的width height text-align(实现水平居中) line-height(实现竖直居中)这些属性全都没有设置，只使用了padding:10px 30px;来代替，所以这种方法是值得推荐的。

　　效果图如下：

技术分享

     C 另外一种方法也可以实现行内元素的垂直居中。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
    </style>
</head>
<body>
    <div id="parent">
        <span>faas</span>
    </div>   
</body>
</html>

　　即我们将id为parent的div元素的display属性值设置位table-cell，这时，即让标签元素以表格单元格的形式呈现，类似于td标签。这时就可以通过设置vertical-align来实现垂直居中了。但值得注意的是：table-cell会被其他一些css属性破坏，比如float和position:absolute等等。且一旦设置位table-cell，这时margin就不能用了。这种方法也可以用于块级元素的垂直居中。

 

 

　　2.块级元素的垂直居中。

　　　方法一：使用绝对定位和负边距。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;<strong>position:relative</strong>; }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
          <strong>  position: absolute;top: 50%;margin-top: -50px;</strong>
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>   
</body>
</html>

　　　方法二：使用display：table-cell;方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>   
</body>
</html>

　　大家可以看出，这个方法与行内元素的垂直居中并没有什么区别。

　　

　　方法三：使用display:flex;代码如下：

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
              <strong> display: flex; align-items:center;</strong> }
        #parent>div{background: red;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>   
</body>
</html>

　　

　　在父元素中添加display:flex;align-items:center;即可实现竖直居中。

 

　　3.使用line-height居中。

　　即给父元素（块级元素）设置height和line-height相等，然后给子元素（inline-block 或者 inline元素) 设置vertical-align:middle即可，如下所示：

技术分享
<!DOCTYPE html>
<html>
<head>
    <title>forMiddle</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            line-height: 500px;
            background-color: #ddd;
        }
        a{
            vertical-align: middle;
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">居中</a>
    </div>
</body>
</html>
技术分享

 

　　又如下所示：

技术分享
<!DOCTYPE html>
<html>
<head>
    <title>forMiddle</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            line-height: 500px;
            background-color: #ddd;
        }
        img{
            vertical-align: middle;
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <img src="http://p0.so.qhmsg.com/bdr/_240_/t018cfb77d38a88e67f.jpg" >
    </div>
</body>
</html>
技术分享

　　这种方式是非常值得学习了。

 

第三部分：水平竖直同时居中

　　　　方法一：使用绝对定位和负边距

　　　　代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
            position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>   
</body>
</html>

　　效果如下：

技术分享

 

　　　　方法二：使用display：flex。

　　　　代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
              <strong> display: flex; align-items:center;  justify-content:center;}</strong>
        #parent>div{background: red;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>   
</body>
</html>

　　即只需要在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。

 

　　

　　方法三：同样使用display:flex.

　　代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
               <strong>display: flex;</strong> }
        #parent>div{background: red;width: 100px;height: 100px;<strong> margin: auto;</strong>}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>   
</body>
</html>

　　我们发现只需要在父元素中设置display:flex;在子元素中设置margin：auto；即可实现居中，这种方法无疑是最简单的。

　　

　　

css中关于居中的那点事儿


联系
我们