居中問題(重點)
居中問題真的是老生常談的話題,基本上每次面試都會被問到,畢竟在樣式的時候居中真的無處不在,關於居中的文章網上比比皆是,好好記住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,回覆:資料
如果這個文章對你有用的話,歡迎點贊轉發關注,讓更多的小夥伴看到呀,畢竟分享是一個程序員最基本的美德!!!
如果有不對的請大佬指教)