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

水平居中

<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属性的值和特性,了解属性以后,对问题进行分解,把特性和分解的问题进行一些联系,问题可以用那些特性实现,综合解决

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

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《元素居中的多种实现方式!
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!