水平垂直居中方式
- 绝对定位+margin:auto
<!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>
</head>
<style>
/* 绝对定位+margin:auto*/
.parent
{
width: auto;
height: 300px;
background-color: bisque;
position:relative;
}
.child
{
position: absolute;
margin:auto;
top:0;
bottom: 0;
left: 0;
right:0;
width: 100px;
height:100px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 利用绝对定位+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>
</head>
<style>
/* 绝对定位+margin:负值*/
.parent
{
width: auto;
height: 300px;
background-color: bisque;
position:relative;
}
.child
{
/* 子元素左上角的位置相对父元素左上角位置定位,没有考虑子元素的本身宽高。通过margin-left/margin-top实现子元素居中 */
position: absolute;
margin-left:-50px;
margin-top: -50px;
top:50%;
left: 50%;
width: 100px;
height:100px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 绝对定位+transform
<!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>
</head>
<style>
/* 绝对定位+transform*/
.parent
{
width: auto;
height: 300px;
background-color: bisque;
position:relative;
}
.child
{
position: absolute;
transform: translate(-50%,-50%);
top:50%;
left: 50%;
width: 100px;
height:100px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- flex布局
<!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>
</head>
<style>
/* flex布局*/
.parent
{
display: flex;
width: auto;
height: 300px;
justify-content: center;
align-items: center;
background-color: bisque;
}
.child
{
width: 100px;
height:100px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- grid布局(兼容性差)
<!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>
</head>
<style>
/* grid布局*/
.parent
{
display: grid;
width: auto;
height: 300px;
justify-content: center;
align-items: center;
background-color: bisque;
}
.child
{
width: 100px;
height:100px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
-
css-table
.wp { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; } <div class="wp"> <div class="box">123123</div> </div>
-
PC端有兼容性要求,宽高固定,推荐absolute + 负margin
-
PC端有兼容要求,宽高不固定,推荐css-table
-
PC端无兼容性要求,推荐flex
-
移动端推荐使用flex
内联元素居中布局
水平居中
- 行内元素可设置:text-align: center
- flex 布局设置父元素:display: flex ; justify-content: center
垂直居中
- 单行文本父元素确认高度:height === line-height
- 多行文本父元素确认高度:disaply: table-cell; vertical-align: middle
块级元素居中布局
水平居中
- 定宽: margin: 0 auto
- 绝对定位 + left:50% + margin: 负自身一半
垂直居中
- position: absolute 设置 left、top、margin-left、margin-top(定高)
- display: table-cell,vertical-align: middle
- transform: translate(x, y)
- flex (不定高,不定宽)cin
- grid(不定高,不定宽),兼容性相对比较差
此内容非原创,来自笔记。仅供学习参考