- div内有多个div
<style>
.flex-center {
padding: 8px;
display: flex;
justify-content: center;
border: 2px dashed #f69c55;
}
.flex-center >div {
padding: 8px;
width: 4rem;
margin: 0 8px;
color: #fff;
background: #000;
}
</style>
<div class="flex-center">
<div>
简单不先于复杂。
</div>
<div>
简单不先于复杂,而是在复杂之后。
</div>
<div>
而是在复杂之后。
</div>
</div>
- div内是文字
text-align:center - 一个div居左,另一个居右
左浮动和右浮动
<div>
<div style="float: left;background: red;width: 30%;height: 300px">
居左
</div>
<div style="float: right;background: green;width: 30%;height: 300px">
居右
</div>
</div>
一个div左右居中
margin-left和margin-right都设成auto
<body>
<div style="height: 30px;background-color:green">
<div style="width: 500px;margin-left: auto;margin-right: auto;height: 30px;background-color: red">
</div>
</div>
</body>