第一种:已知元素宽高,使元素水平居中
代码如下:
#test{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
margin:0 auto 使元素水平居中,上下的外边距为0,左右外边距为auto,左右的外边距会平均分配。当上下的外边距设置为auto时,效果和当前效果一致。
第二种:已知元素高宽,使元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--已知高宽的元素水平居中的方案-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
#test{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
test
</div>
</div>
</body>
</html>
让内部div相对于外部div进行定位,内部div的偏移量为外部div高宽的50%,然后再使内部div向内移动自身的一半。
元素的初始位置如图中1方块的位置, 当这时left和top各为50%时,内部div位于图中2方块的位置,设置margin为负数时,使内部div到达外部div的中间,图中3方块的位置。
第三种:已知元素高宽,使元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
background: pink;
width: 400px;
height: 600px;
margin: 0 auto;
}
#test{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
testt<br />
</div>
</div>
</body>
</html>
绝对定位盒子的特性
水平方向上:left+right+padding+width+margin = 包含块水平方向上padding区域的尺寸
垂直方向上:top+bottom+height+padding+margin = 包含块内垂直方向上padding区域的尺寸
当left、right、top、bottom、padding的值都为0,margin为auto时,可使得元素垂直水平居中
第四种:未知元素的高宽,是元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
background: pink;
width: 400px;
height: 600px;
margin: 0 auto;
}
#test{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
</div>
</div>
</body>
</html>
这种方法和第二种方法类似,使内部div相对于外部div进行定位,left和top值都为外部div的50%,然后通过transform: translate3d(-50%,-50%,0)方法,使元素在x和y中方向上向内移动自身大小的一半,z轴方向上不变。不过大部分浏览器不支持该方法。
第五种:使图片垂直水平居中,也适用于未知元素的垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
text-align: center;
}
body::after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="img/1.jpg">
</body>
</html>
先让body的高度变为100%,然后在body后添加伪类after,设置高度为100%,宽度为0,然后使添加的伪类水平居中,最后使图片的基线对准伪元素的基线即可。