上海WEB培训
达内上海市场营销中心
15026646813
Web开发中CSS常见布局-水平居中
- 时间：2018-03-26 14:05
- 发布：达内上海Web培训官方首页
- 来源：达内新闻
- 分享到：
一提到盒模型，很多Web开发培训学员就想到了css布局，本篇文章上海Web开发培训小编不讲基础知识，而是给大家提出一种布局的解决方案，水平居中布局。
首先我们来看看水平居中需要用到的：
1.margin + 定宽
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
相必上海Web开发培训的学员都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽。
2. table + margin
<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>
3.inline-block + text-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
兼容性佳（甚至可以兼容IE 6和IE 7）
4. absolute + margin-left
<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，有兼容性更好。
5. absolute + 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属性，有兼容性问题。
6. flex + justify-content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
下一篇：Web开发平台的各种基本认识
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 达内时代科技集团有限公司 版权所有
选择城市和中心
北京
山东省
江苏省
上海
江西省
浙江省
贵州省
广西省
广东省
海南省
台湾