css中关于居中的那点事儿

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

第一部分：水平居中

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

<!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="pic.png">

	</div>

</body>

</html>

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

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

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

<!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是相对于其父元素而言的。

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

　　代码如下所示：

<!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; left: 50%; margin-left: -50px;
　          /*注意：因为绝对定位是left的值是相对于son的最左边为50%，所以需要使用margin-left再向左偏移宽度的一半  */


        }

    </style>

</head>

<body>

    <div id="parent">

        <div id="son">faas</div>

    </div>

</body>

</html>

　　效果图如下：

第二部分：垂直居中

　　1.行内元素的垂直居中

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

　　　　html代码如下：

<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代码如下：

    <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代码如下：

        *{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 另外一种方法也可以实现行内元素的垂直居中。

代码如下：

<!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.块级元素的垂直居中。

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

<!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;

        }

    </style>

</head>

<body>

    <div id="parent">

        <div id="son">faas</div>

    </div>

</body>

</html>

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

<!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;代码如下：

<!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;

               display: flex; align-items:center; }

        #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" alt="">

    </div>

</body>

</html>

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

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

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

　　　　代码如下

<!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。

　　　　代码如下：

<!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;

               display: flex; align-items:center;  justify-content:center;}

        #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.

　　代码如下：

<!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;

               display: flex; }

        #parent>div{background: red;width: 100px;height: 100px; margin: auto;}

    </style>

</head>

<body>

    <div id="parent">

        <div>faas</div>

    </div>

</body>

</html>

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