2.布局解决方案- 水平布局<1>
居中布局
水平布局 写出两个盒子并满足以下条件条件： 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也会继承居中，单独设置文字单独设置他的对齐方式 第二种方式 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;的元素是块状元素，但是宽度是跟着内容走。这是不同于其他的块状元素 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>我是第一个</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>这种方式的优点就是子元素脱离文档流不会对别的元素产生影响，缺点是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>当父元素设置display:flex;的时候 flex item的宽度默认就是auto,优点很明显就是不用设置son元素，当然也可以设置son元素margin:0 auto; 确定，兼容性不好。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.11.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读