前面的话

  水平居中是经常遇到的问题。看似方法较多,条条大路通罗马。但系统梳理下,其实都围绕着几个思路展开。本文将介绍关于水平居中的5种思路

text-align

【思路一】:在父元素中设置text-align:center实现行内元素水平居中

  将子元素的display设置为inline-block,使子元素变成行内元素

  [注意]若要兼容IE7-浏览器,可使用display:inline;zoom:1;来达到inline-block的效果

<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

   这种方法的不足之处在于,子元素的text-align继承了父元素的center,文字也居中显示,所以需要在子元素中设置text-align:left

margin

【思路二】:在本身元素设置margin: 0 auto实现块级元素水平居中

【1】将子元素的display为table,使子元素成为块级元素,同时table还具有包裹性,宽度由内容撑开

  [注意]若要兼容IE7-浏览器,可把child的结构换成<table class="child">DEMO</table>

<style>
.child{
display: table;
margin: 0 auto;
}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

  该方案的优点在于,只设置父级元素即可实现居中效果

【2】若子元素定宽,则可以使用绝对定位的盒模型属性,实现居中效果;若不设置宽度时,子元素被拉伸

<style>
.parent{
position: relative;
}
.child{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

absolute

【思路三】: 通过绝对定位的偏移属性实现水平居中

【1】配合translate()位移函数

  translate函数的百分比是相对于自身宽度的,所以left:50%配合translateX(-50%)可实现居中效果

  [注意]IE9-浏览器不支持

<style>
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
transform:translateX(-50%);
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

【2】配合relative

  relative数值型的偏移属性是相对于自身的,但百分比却是相对于包含块的。因为子元素已经被设置为absolute,所以若使用relative,则需要增加一层<div>结构,使其宽度与子元素宽度相同

  [注意]该方法全兼容,但是增加了html结构

<style>
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%;
}
.child{
position: relative;
left: -50%;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>

【3】配合负margin

  margin的百分比是相对于包含块的,所以需要增加一层<div>结构。由于宽度width的默认值是auto,当设置负margin时,width也会随着变大。所以此时需要定宽处理

  [注意]虽然全兼容,但需要增加页面结构及定宽处理,所以限制了应用场景

<style>
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%;
}
.child{
width:50px;
margin-left:-50%;
}
</style>
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>

flex

【思路四】: 使用弹性盒模型flex实现水平居中

  [注意]IE9-浏览器不支持

【1】在伸缩容器上设置主轴对齐方式justify-content:center

<style>
.parent{
display: flex;
justify-content: center;
}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

【2】在伸缩项目上设置margin: 0 auto

<style>
.parent{display: flex;}
.child{margin: 0 auto;}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

grid

【思路五】: 使用栅格布局grid实现水平居中

  [注意]IE10-浏览器不支持

【1】在网格容器上设置justify-items或justify-content

<style>
.parent{
display:grid;
justify-items:center;
/*justify-content:center;*/
}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

【2】在网格项目中设置justify-self或者margin: 0 auto

<style>
.parent{
display:grid;
}
.child{
justify-self:center;
/*margin: 0 auto;*/
}
</style>
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>

CSS实现水平居中的4种思路的更多相关文章

  1. CSS实现水平居中的5种思路

    前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展开.本文将介绍关于水平居中的5种思路 text-align [思路一]:在父元素中设置text-a ...

  2. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  3. CSS实现垂直居中的4种思路

    × 目录 [1]line-height [2]vertical-align [3]absolute [4]flex 前面的话 相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-a ...

  4. CSS实现垂直居中的5种思路

    前面的话 相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-align不能正确使用.实际上,实现垂直居中也是围绕几个思路展开的.本文将介绍关于垂直居中的5种思路 line-hei ...

  5. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  6. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  7. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  8. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  9. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

随机推荐

  1. Eclipse中设置jsp文字大小

  2. DOM技术实现竞赛题页面

    DOM技术实现竞赛题页面 这一段时间学习了DOM操作和JS开发,我就自己开发一个竞赛题的页面. 一.业务需求 1.目标:做一个一百道选择题的页面 2.功能: 显示题目和选项. 下一题上一题的按钮,到第 ...

  3. Win7系统修改hosts文件不能保存的解决方法

    地址:http://jingyan.baidu.com/album/e5c39bf56564a539d7603312.html

  4. Python学习笔记1——Python基础

    一. 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  5. java jps 命令详解

    JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...

  6. 基于ejbca构建独立ca系统

    ejbca,是一个CA(Certificate Authority)系统软件,CA是数字证书认证中心的简称,主要功能是管理数字证书,包括证书的颁发.销毁.更新等,ejbca实现了CA规范,因此可以用来 ...

  7. AWIT DBackup 0.0.20 发布,备份系统

    AWIT DBackup 0.0.20 修复了几个小 bug. AllWorldIT DBackup 是一个备份系统,为每个目录创建一个独立的压缩包,这更便于搜索. 特点: 使用 xz, bzip2, ...

  8. mono for android学习过程系列教程(6)

    接着上一讲,今天讲的是Button,CheckBox这二个安卓元素, 我们来看第一个Button这个控件,类似winform和webform里面一样,它也是 存在有触发事件的,我们新建初始化项目直接就 ...

  9. 使用阿里云负载均衡遭遇的http重定向https的问题

    昨天解决了在阿里云负载均衡上部署https证书的问题(详见一个空行引起的阿里云负载均衡上部署https证书的问题),并完成了部署,负载均衡的监听配置是这样的: 用户与负载均衡之间走https协议,负载 ...

  10. 《C#图解教程》读书笔记之二:存储、类型和变量

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.类型初窥:掀起你的盖头来 (1)C程序是一组函数和数据类型,C++程序是一组函数和类,而C#程序是一组类型声 ...