CSS的水平居中与垂直居中
Posted _oldzhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的水平居中与垂直居中相关的知识，希望对你有一定的参考价值。
水平居中：
1，对于行内元素直接通过text-align:center设置即可
2，对于宽度固定的DIV居中，设置margin:0 auto;就可以，表示让浏览器自动计算左右margin来居中
3，对于宽度不固定的，比如分页的页码，由于不知道会有多少页，所以不能设置固定宽度，有三种方法来设置
a,利用table来设置
<pre style="font-family: Menlo; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table
margin: 0 auto;
ul
list-style: none;
li
float: left;
li a
display: block;
margin-right: 8px;
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>通过设置table的居中，来达到里面单元格居中的效果。缺点是会引入一些无语义的标签
b,通过设置div中元素为inline或inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
text-align:center;
.container ul
list-style:none;
.container li
margin-right:8px;
display:inline;
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>c,通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
float:left;
position:relative;
left:50%
.container ul
list-style:none;
position:relative;
left:-50%;
.container lifloat:left;display:block;margin-right:8px;
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>垂直居中：
1，单行文本的垂直居中设置父元素的height与line-height一样就可以
2，多行文本，图片，块状元素的垂直居中有二种方法
a,使用插入 table，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以需要插入table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table tdheight:500px;background:#ccc
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
</html>b，利用displa:table-cell属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
</body>
</html>这种方法的好处是不用添加多余的无意义的标签，但不兼容 IE6、7
以上是关于CSS的水平居中与垂直居中的主要内容，如果未能解决你的问题，请参考以下文章