CSS居中方法总结

2016-06-19 17:38:00

水平居中实现方案

确定宽度的元素水平居中

1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。
HTML:

          center

CSS:

    .parent {      margin: auto;    }    .child {      width: 200px;    }

此时检查元素即可即可实现内层的div实现了居中,这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。
2.通过position定位
HTML:

      1. center

CSS:

   div {      float: left;      width: 100%;      position: relative;    }    ul {      position: absolute;      left: 50%;      width: 200px;      margin-left: -100px;    }

不确定宽度的元素居中

1.给子元素设置display: inline-black,父元素设置text-align: center。
HTML:

      center

CSS:

    div {      text-align: center;    }    p {      display: inline-block;    }

2.当元素被设置float的时候,它的宽度就会被其内容撑开，然后通过positon定位来实现横向居中。
HTML:

        1. center

CSS:

    div {      float: left;      width: 100%;      position: relative;    }    ul {      position: relative;      left: 50%;      float: left;    }    li {      float: left;      position: relative;      right: 50%;      display: block;    }

3.flex布局， justify-content:center;主轴居中。align-items:center;交叉轴居中；当设置了flex-direction属性时，主轴的方向会改变。
4.css width: fit-content属性。
5.用css3的transform
HTML:

      center

CSS:

    div {      position: relative;    }    .test {      position: relative;      left: 50%;      float: left;      transform: translateX(-50%);    }

总结一下起来也就是两种方式，其中有比较直接的方式比如，margin: 0 auto，虽然这种方式的兼容性很好，没有副作用，但是这种方式最主要的缺陷是只适用于子元素宽度固定的情况。或者用css3的固有属性flex布局或者 width: fix-content这种方式实现起来简单直接，但在处理一些旧版本的浏览器时，存在很严重的兼容性问题。还有就是间接的实现方式通过position定位，具体思想主要是子元素先移动到父元素二分之一的位置，relative，或者absoulte都可以实现，然后在将子元素向左移动自身二分之一的位置，这种方式有广泛的适用性，但是思路可能比较复杂。

垂直居中实现方案

1.用css3的transform属性，以及postion定位，与上面的水平居中类似，只是改为top:50%,translateY(-50%)即可。
2.设置父元素display: table;子元素dispaly: table-cell,vertical-align: middle;
3.绝对定位
HTML:

      nnnnnnn

CSS:

    .parent {      position: relative;      height: 400px;    }    .child {      margin: auto;      height: 200px;      position: absolute;      top:0;      bottom: 0;    }

4.单行文本时可以设置height与line－height相同实现文字居中。
5.外边距margin取负数，大小为width/height的一半，再加上top: 50%; left: 50%;

关键字：css, 居中, position, left

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！