上海WEB培训
达内上海市场营销中心

18710472552

热门课程

Web开发中CSS常见布局-水平居中

  • 时间:2018-03-26
  • 发布:达内上海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开发培训:教你关于Web前端开发的三个标准
下一篇:Web开发平台的各种基本认识

Web开发理论知识:为什么要进行网站重构呢?

微信开发者工具新版功能有哪些?

Web开发中关于js的面试题

Web前端开发:那些年入百万的大咖是如何做到的?

选择城市和中心
贵州省

广西省

海南省

免费学习5天VIP课程