CSS的居中有水平居中和垂直居中，这两种居中又分为行内元素居中和块级元素居中，不同的居中用不同方法。
水平居中
1、行内元素水平居中（文本，图片）
给父层设置 text-align:center; 可以实现行内元素水平居中。
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
.center{text-align:center;}
</style>
</head>
<body>
<div class=”center”>
<a href=”https://www.google.com.hk/”>谷歌搜索</a><br/><br/>
<img src=”cat.jpg” width=”248″ height=”162″ alt=”"/>
</div>
</body>
</html>2、确定宽度块级元素水平居中
确定宽度的块级元素水平居中，常用的有 margin:0 auto;
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
.center{width:100px;height:100px;margin:0 auto;background:red;}
</style>
</head>
<body>
<div class=”center”></div>
</body>
</html>3、不确定宽度的块级元素水平居中
不确定宽度的块级元素有三种方法实现。
方法一：
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
table{margin-left:auto;margin-right:auto;}
.demo li{float:left;display:inline;margin-right:5px;}
.demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:https://csswang.com/316ac5;color:white;border:1px solid https://csswang.com/316ac5;text-decoration:none;}
.demo a:hover{background:white;color:https://csswang.com/316ac5;}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
<li><a href=”https://csswang.com/”>4</a></li>
<li><a href=”https://csswang.com/”>5</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素，如果不给它设定宽度的话，会由内部元素的宽度“撑开”，但即使不设定它的宽度，仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。
这种方法很巧妙，但是增加了无语义标签，加深了标签的嵌套层数。
方法二：
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
.wrapper{width:500px;height:100px;background:black;}
.demo{text-align:center;padding:5px;}
.demo li{display:inline;}
.demo a{padding:2px 6px;background:https://csswang.com/316ac5;color:white;border:1px solid https://csswang.com/316ac5;text-decoration:none;}
.demo a:hover{background:white;color:https://csswang.com/316ac5;}
</style>
</head>
<body>
<div class=”wrapper”>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
</ul>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
</ul>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
<li><a href=”https://csswang.com/”>4</a></li>
<li><a href=”https://csswang.com/”>5</a></li>
</ul>
</div>
</body>
</html>方法二是改变元素的 display 值，使块级元素变成行内元素，然后使用 text-align:center 使其居中。相对于方法一，它不用增加无语义标签，简化了标签的嵌套深度，但它也存在一定的问题：它将块级元素变成了行内元素，这样就失去了一些块级元素的功能，比如设置宽度，高度。
方法三：
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
.wrapper{width:500px;height:100px;background:black;}
.demo{clear:both;padding-top:5px;float:left;position:relative;left:50%;}
.demo li{display:inline;float:left;margin-right:5px;position:relative;left:-50%;}
.demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:https://csswang.com/316ac5;color:white;border:1px solid https://csswang.com/316ac5;text-decoration:none;}
.demo a:hover{background:white;color:https://csswang.com/316ac5;}
</style>
</head>
<body>
<div class=”wrapper”>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
</ul>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
</ul>
<ul class=”demo”>
<li><a href=”https://csswang.com/”>1</a></li>
<li><a href=”https://csswang.com/”>2</a></li>
<li><a href=”https://csswang.com/”>3</a></li>
<li><a href=”https://csswang.com/”>4</a></li>
<li><a href=”https://csswang.com/”>5</a></li>
</ul>
</div>
</body>
</html>方法三通过给父层设置浮动和相对定位以及 left:50%，子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能，而且不会添加无语义标签，不增加嵌套深度，但是设置了相对定位，会带来一定的副作用。
这三种方法各有优缺点，具体使用哪种方法可以视具体情况而定。
本文链接：» https://www.csswang.com/exp/cssexp/2910
转载请注明本文来源出处。
