居中总结
居中:盒子在其包含快中居中
行盒(行块盒)居中
直接设置行盒(块)父元素 text-align:center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: lightblue;
height: 100px;
text-align: center;
}
.inline-block{
display: inline-block;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<a href="">超链接</a>
</div>
<div>
<span class="inline-block"></span>
</div>
<div>
<img src="" alt="">
</div>
<div>
<input type="text">
</div>
</body>
</html>
常规流块盒的水平居中
定宽,设置左右margin为auto
一定要定宽,否则宽度为auto,会撑满,吸收能力大于margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin: 30px;
height: 500px;
background-color: lightblue;
}
p{
width: 500px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
</html>
绝对定位元素的水平居中
定宽,设置左右坐标为0(left:0 right:0)将margin设置为auto
实际上 固定定位fixed(包含快是视口)是绝对定位absolute(父元素填充盒是包含快)的特殊情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin: 30px;
height: 200px;
background-color: lightblue;
position: relative;
}
p{
width: 500px;
height: 100px;
background-color: red;
left: 0;
right: 0;
margin: 0 auto;
/* 父元素的填充盒为其包含快 */
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
</html>
单行文本的垂直居中
设置文本所在元素的行高,为整个区域的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background-color: lightblue;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<h1>
biaoti
</h1>
</body>
</html>
行块盒或块盒内多行文本垂直居中
没有完美方案,
设置盒子上下内边距相同,达到类似效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: lightblue;
display: inline-block;
padding: 100px 0;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum possimus corporis eveniet voluptas! Corporis placeat iusto temporibus reiciendis illum ex impedit, expedita recusandae ea veritatis iure debitis quo et modi?
</div>
</body>
</html>
绝对定位的垂直居中
定高,设置上下边距为0 (top:0 bottom:0) ,上下margin为auto