元素居中的多种实现方式!

水平居中

<1>行内元素的居中

被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

  • text-align
<title>行内元素水平居中</title><style>div{    border:1px solid red;    margin:20px;
}.txtCenter{text-align:center;}.imgCenter{text-align:center;}</style></head><body><div class="txtCenter">我想要在父容器中水平居中显示。</div><div class="imgCenter">![](http://upload-images.jianshu.io/upload_images/5983146-dec4b8fafded5d82.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div></body>

<2>块状元素的居中

当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

定宽块状元素

  • margin: value auto;
<title>定宽块状元素水平居中</title><style>
    div{        border:1px solid red;        width:200px;        margin:20px auto;
    }</style><body>
    <div>我是定宽块状元素,我要水平居中显示。</div></body>

不定宽块状元素

  • table + margin

table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

<-- css --><style type="text/css">
    body{margin:20px;}    .parent{background: red;}    .child{        display: table;        margin: 0 auto;        background: blue;        opacity: .5;
    }</style><-- html --><div class="parent">
    <div class="child">DEMO</div></div>
  • inline-block + text-align

初始DEMO是块级元素,会充满父元素;inline-block默认宽度为内容宽度,然后给父元素设置text-align

优点:兼容性较好,甚至可以兼容IE6 缺点:子元素会继承父元素的text-align,使子元素里的内容也水平居中

<style type="text/css">
    body{margin:20px;}    .parent{        background: red;        text-align: center;
    }    .child{        display: inline-block;        background: blue;
    }</style><body><div class="parent">
    <div class="child">DEMO</div></div></body>
  • absolute + transform

利用绝对定位和偏移解决居中问题,left:50%; 将子元素距离左边50%,translateX是将自身宽度往左偏移50%;结果是水平居中

优点:因为position:absolute;脱离文档流,所以不会影响其他的子元素; 缺点:transform是css3的内容,所以兼容性较差;

<style type="text/css">
    body{margin:20px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{height:1.5em;}    .parent{        position: relative;
    }    .child{        position: absolute;        left: 50%;        transform: translateX(-50%);
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div>
  • float + relative

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

<style>.wrap{    clear:both;    float:left;    position:relative;    left:50%
    }.wrap-center{    background:#ccc;    position:relative;    left:-50%;
}</style></head><body><div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div></div>
  • flex + justify-content

flex是弹性布局,有自己的居中属性,水平居中justify-content:center

优点:只需设置父元素,不用设置子元素 缺点:flex也是css3的,兼容性较差

<style type="text/css">
    body{margin:20px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{        display: flex;        justify-content: center;
    }    .child{        margin: 0 auto;
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div>

垂直居中

<1>父元素高度确定的单行文本

通过设置父元素的heightline-height高度一致来实现的。(height:该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

缺点:当文字内容的长度大于块的宽时,就有内容脱离了块。

<title>垂直居中</title><style>.wrap h2{    margin:0;    height:100px;    line-height:100px;    background:#ccc;
}</style></head><body><div class="wrap">
    <h2>hello world!</h2></div></body>

<2>父元素高度不确定的多行文本

  • table-cell + vertical-align

竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以可以设置垂直居中

优点:不用添加无意义的标签 缺点:兼容性有问题

<title>垂直居中</title><style type="text/css">
    body{margin:20px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{width:4em;height:500px;}    .child{width:100%;}    .parent{        display: table-cell;        vertical-align: middle;
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div>

下面的代码直接在div外面机加一个table tbody tr td,又因为td标签默认情况下就默认设置了vertical-alignmiddle,所以我们不需要显式地设置了。

<style>
  .wrap{height:300px;background:#ccc}</style></head><body><table><tbody><tr><td class="wrap"><div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p></div></td></tr></tbody></table><table><tbody><tr><td class="wrap"><div>
    ![害羞的小女生](http://upload-images.jianshu.io/upload_images/5983146-1a12aeadf25d2b5f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div></td></tr></tbody></table></body>
  • absolute + transform

这个方法和水平居中的方法类似,唯一的区别是top:50%;,transform:translateY(-50%);

  • flex + align-items

与水平居中justify-content对应的属性align-items值为center,也可以实现垂直居中 设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch


水平垂直居中

综合水平居中和垂直居中一起

  • inline-block + text-align +table-cell +vertical-align
<title>居中</title><style type="text/css">
    body{margin:20px;}    .parent{width:200px;height:300px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{        text-align: center;        display: table-cell;        vertical-align: middle;
    }    .child{        display: inline-block;
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div></body>
  • absolute + transform
<title>居中</title><style type="text/css">
    body{margin:20px;}    .parent{width:200px;height:300px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{        position: relative;
    }    .child{        position: absolute;        left: 50%;        top: 50%;        transform: translate(-50%,-50%);
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div>
  • flex + justify-content + align-items
<title>居中</title><style type="text/css">
    body{margin:20px;}    .parent{width:200px;height:300px;}    .parent{background:#ddd;}    .child{background:#666;color:#fff;}    .parent{        display: flex;        justify-content: center;        align-items: center;
    }</style></head><body><div class="parent">
    <div class="child">DEMO</div></div></body>

垂直居中的搭配有很多,我们可以根据实际情况做出一个判断,然后充分了解一些居中的属性以及属性值

本文所讲述Demo下载地址https://github.com/shiyuemengxiang/center


总结:解决此类问题,我们需要了解css属性的值和特性,了解属性以后,对问题进行分解,把特性和分解的问题进行一些联系,问题可以用那些特性实现,综合解决

本文参考来源来自互联网!如有版权侵犯请留言!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。

2331
来自专栏我分享我快乐

CSS心得宝典

初学者必备 Html属性不能重复使用,但css的属性是后写的替换先写的 子级标签属性会继承父级标签属性 子级标签属性与父级冲突,子级优先 布局级别就是排队级别...

43110
来自专栏菜鸟计划

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

5017
来自专栏前端杂货铺

垂直属性

元素的盒模型有几个较为重要的属性,本篇文章主要将脚垫聚集在与height相关的属性上。 对于一个并未显式设置高度块框来说,其height的高度不仅仅取决去内容的...

3667
来自专栏cnblogs

【垂直居中高级篇】你不知道的垂直居中方式

      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用...

2058
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

1753
来自专栏Micro_awake web

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: ...

3686
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3213
来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

752
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

22010

扫码关注云+社区

领取腾讯云代金券