必备知识点:css居中,你还没有记住吗?
居中问题(重点)
居中问题真的是老生常谈的话题,基本上每次面试都会被问到,毕竟在样式的时候居中真的无处不在,关于居中的文章网上比比皆是,好好记住4-5种,以后面试跟工作没有任何问题啦
常见的居中分很多中,比如水平居中,垂直居中,水平垂直居中,定宽高和不定宽高,我们分定宽高和不定宽高来讨论水平垂直居中的几种方式
1.定宽高
- 定位+margin:auto+left+right+ top+bottom
<!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>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto ;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
</html>
- 定位+margin :-50%
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
- 定位+transform
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
- flex布局
.container {
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
p {
width: 100px;
height: 100px;
background: red;
}
- grid布局 margin: auto;
.container {
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p {
width: 100px;
height: 100px;
background: red;
margin: auto;
}
2. 不定宽高
- 绝对定位 + transform
<!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>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<p>好好学习吧</p>
</div>
</body>
</html>
- table-cell
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
p{
background: red;
display: inline-block;
}
- flex布局
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
p{
background: red;
}
- flex + margin:auto
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
}
p{
margin: auto;
background: red;
}
- grid + flex布局
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p{
background: red;
align-self: center;
justify-self: center;
}
- gird + margin布局
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p{
background: red;
margin: auto;
}
把水平居中或者垂直居中分开讨论
一、内联元素居中布局
水平居中
行内元素可设置:text-align: center;
flex布局设置父元素:display: flex; justify-content: center;
垂直居中
单行文本父元素确认高度:height === line-height
多行文本父元素确认高度:disaply: table-cell; vertical-align: middle;
二、块级元素居中布局
水平居中
定宽: margin: 0 auto;
不定宽: 参考上诉例子中不定宽高例子。
垂直居中
position: absolute设置left、top、margin-left、margin-to(定高);
position: fixed设置margin: auto(定高);
display: table-cell;
transform: translate(x, y);
flex(不定高,不定宽);
grid(不定高,不定宽),兼容性相对比较差;
关于居中的好文的传送门(参考文章)
(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)