


上海WEB培训
达内上海市场营销中心
18710472552
一提到盒模型,很多Web开发培训学员就想到了css布局,本篇文章上海Web开发培训小编不讲基础知识,而是给大家提出一种布局的解决方案,水平居中布局。
首先我们来看看水平居中需要用到的:
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
相必上海Web开发培训的学员都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
display: table在表现上类似block元素,但是宽度为内容宽。
无需设置父元素样式(支持IE 8及其以上版本)兼容IE 8一下版本需要调整为<table>
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
兼容性佳(甚至可以兼容IE 6和IE 7)
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
宽度固定,相比于使用transform,有兼容性更好。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
上海Web开发培训:绝对定位脱离文档流,不会对后续元素的布局造成影响。transform为CSS3属性,有兼容性问题。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
免费学习5天VIP课程