PS:本文是对本博客中转载的《垂直和水平居中方法小结》的删减及部分改动,均有实例展示
1 水平居中方法
1.1 文字的水平居中
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style type="text/css">
.box{
background-color: lightgreen;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1><h1>我要水平居中<h1></h1>
<span><span>我要水平居中<span></span>
</div>
</body>
</html>
效果:
实现方式:对父元素使用text-align:center;则父元素中的文字会水平居中,不管是被块元素还是内联元素修饰
1.2 定宽块的水平居中
这个较为简单,直接margin:0 auto;
1.3 不定宽块的水平居中
目的:要让.box下的.inner块水平居中
代码:
<div class="box">
<div class="wrap">
<div class="inner">
<h1><h1>我要水平居中<h1></h1>
<span><span>我要水平居中<span></span>
</div>
</div>
</div>
样式:
<span style="white-space:pre"> </span>.box{
background-color: lightgreen;
height:200px;
width:400px;
}
.wrap{
float:left;
position:relative;
left:50%;
}
.inner{
position:relative; /*为啥用absolute没用啊*/
left:-50%;
background: red;
width:300px;
}
效果:
分析:在inner外围包了一层wrap,可见inner确实水平居中了,但inne里r的内容没有水平居中
2 垂直居中方法
2.1 单行文字的垂直居中
让line-height等于height即可
2.2 多行文字、子块元素、图片的垂直居中(父元素高度确定)
让父元素display:table-cell;vertical-align: middle;
代码:
<span style="white-space:pre"> </span><div class="box">
垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
</div>
<span style="white-space:pre"> </span><div class="box">
<div class="wrap">
垂直居中居中垂直居中垂直居中垂直居中垂直居中垂直居中
</div>
</div>
样式:
<span style="white-space:pre"> </span>.box{
display: table-cell;
width:200px;
height:200px;
background: pink;
vertical-align: middle;
}
.wrap{
width:100px;
background: purple;
}
效果:
注:以上是针对父元素中子元素是单一的种类,若不是单一的,如子元素中既有图片也有文字,那么文字就不会垂直对齐了,此时需对图片或块设置verticle:middle;
2.3 父元素高度不确定时
只需将父元素的上下padding值设为一样就可让子元素看上去垂直居中