筆記學(xué)習(xí)整理
css垂直水平居中分為：
- 定寬居中
方法①absolute+負margin
②absolute+margin:auto
③absolute+calc
④ min-height: 100vh+flex+margin:auto - 不定寬居中
①absolute + transform
②lineheight
③writing-mode
④css-table
⑤flex
⑥grid
一、定寬居中
1、定寬居中(absolute+負maigin)
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定寬居中</title>
<style>
.father {
width: 400px;
height: 400px;
border: 1px solid blue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* 1、定寬高定位：absolute + 負邊距margin */
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
2、定寬居中(absolute+maigin:auto)
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box.size {
width: 100px;
height: 100px;
}
.box {
background: green;
/*2奄妨、定寬高定位：absolute + margin:auto */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="wp">
<div class="box size">
子元素定寬高
</div>
</div>
</body>
</html>
3、定寬居中(absolute+calc)
position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box.size {
width: 100px;
height: 100px;
}
.box {
background: green;
/* 3窿克、定寬高定位：（兼容性依賴css3的calc）absolute + 計算屬性calc */
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
</head>
<body>
<div class="wp">
<div class="box size">
子元素定寬高
</div>
</div>
</body>
</html>
4具被、定寬居中（min-height: 100vh+flex+margin:auto）
<!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>定寬居中</title>
<style>
main{
min-height: 100vh;
/* vh相對于視窗的高度，視窗高度是100vh */
/* “視區(qū)”所指為瀏覽器內(nèi)部的可視區(qū)域大小跃惫，
即window.innerWidth/window.innerHeight大小叮叹，
不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。 */
display: flex;
}
div{
width: 50px;
height: 50px;
background-color: red;
margin: auto;
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>
二爆存、不定寬居中
1蛉顽、不定寬高居中：absolute+transform（依賴translate 2d的兼容性）
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>不定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
/* 1、不定寬高居中：（依賴translate 2d的兼容性）absolute+transform */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wp">
<div class="box">
子元素不定寬高
</div>
</div>
</body>
</html>
2先较、不定寬高居中：lineheight
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>不定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 2携冤、不定寬高居中 */
text-align: center;
line-height: 300px;
font-size: 0px;
}
.box {
/* 2、不定寬高居中l(wèi)ineheight */
display: inline-block;
vertical-align: middle;
line-height: inherit;
text-align: left;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">
子元素不定寬高
</div>
</div>
</body>
</html>
3闲勺、不定寬高居中
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>不定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 3曾棕、不定寬高居中css-table */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
/* 3、 */
display: inline-block;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">
子元素不定寬高
</div>
</div>
</body>
</html>
4菜循、不定寬高居中flex
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>不定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 4翘地、不定寬高居中flex */
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">
子元素不定寬高
</div>
</div>
</body>
</html>
5、不定寬高居中g(shù)rid (css3網(wǎng)格系統(tǒng)grid兼容性不如flex 不推薦使用)
display: grid;
justify-self: center;
align-self: center;
<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>不定寬高定位</title>
<meta content="" name="Description" />
<meta content="" name="Keywords" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript"></script>
<style>
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 5债朵、grid */
display: grid;
}
.box {
/* 5子眶、不定寬高居中g(shù)rid(兼容性不如flex 不推薦使用) */
justify-self: center;
align-self: center;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">
子元素不定寬高
</div>
</div>
</body>
</html>
這邊通過網(wǎng)上學(xué)習(xí)，總結(jié)了以上幾種方法序芦，便于日后遺忘臭杰。
