对于CSS页面布局来说,居中对齐很常用,在这里我们归纳总结一下各种居中对齐的方法。
1.页面居中对齐
居中对齐一个元素(如<div>)可以使用margin:auto,必须要设置元素的宽度,通过指定宽度,将两边的空外边距平均分配,达到页面元素居中对齐的目的。注意:如果不设置width属性(或设置为100%),居中对齐将不起作用。
<html>
<head>
<meta charset="utf-8">
<title>CSS元素居中</title>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>
<div class="center">
<p>元素居中对齐</p>
</div>
</body>
</html>
运行结果:
2.垂直居中—使用padding
CSS中有很多方式可以实现垂直居中对齐,一个简单的方式就是头部顶部使用padding。
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.center {
padding: 45px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>
运行结果:
通过运行结果我们可以看到,内容确实是垂直居中的,距离上下边框分别为45px。如果要水平方向也居中,只需要再添加text-align: center即可。
3.垂直居中—使用line-height
使用line-height来设置元素垂直居中,只需要设置line-height的值与height的属性值相等即可,所以前提条件是height的属性值必须给出。
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.center {
line-height: 100px;
height: 100px;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<div class="center">我是垂直居中的。</div>
</body>
</html>
运行结果: