居中布局
水平布局
寫(xiě)出兩個(gè)盒子并滿足以下條件條件：
1.里面的寬度盒子不固定
2.外面盒子的寬度不固定
第一種解決方案 inline-block+text-align
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
text-align: center;
}
.son{
background: pink;
height: 200px;
display: inline-block;
*display: inline;
*zoom: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">DEMODEMODEMO</div>
</div>
</body>
</html>
這種解決方案兼容性好，但是son也會(huì)繼承居中，單獨(dú)設(shè)置文字單獨(dú)設(shè)置他的對(duì)齊方式
第二種方式 display:table+margin
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
}
.son{
background: pink;
height: 200px;
display: table;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">DEMODEMODEMO</div>
</div>
</body>
</html>
display: table;的元素是塊狀元素，但是寬度是跟著內(nèi)容走。這是不同于其他的塊狀元素
display: table;兼容性不是很好，改成以下方式解決
第二種方式2 用table布局方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
}
.son{
background: pink;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<table class="son">
<tr>
<td>我是第一個(gè)</td>
</tr>
</table>
</div>
</body>
</html>
第三種方式absolute+transform
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
position: relative;
}
.son{
background: pink;
height: 200px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="son">我是一段文字</div>
</div>
</body>
</html>
這種方式的優(yōu)點(diǎn)就是子元素脫離文檔流不會(huì)對(duì)別的元素產(chǎn)生影響，缺點(diǎn)是transform兼容性不好
第四種方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
display: flex;
justify-content: center;
}
.son{
background: pink;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">我是一段文字</div>
</div>
</body>
</html>
當(dāng)父元素設(shè)置display:flex;的時(shí)候 flex item的寬度默認(rèn)就是auto,優(yōu)點(diǎn)很明顯就是不用設(shè)置son元素，當(dāng)然也可以設(shè)置son元素margin:0 auto;
確定，兼容性不好。
