runfastlynda

CSS技巧之居中元素的几种方法

September 15, 2015

居中元素我们经常会用到,下面介绍下各种情况下居中元素的方法。

居中一个行内元素

常用的行内元素有 span, strong, em, br, img , input, label, select, textarea等等,

行内元素的特点:
  • 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
  • 行内元素设置width, height无效
  • 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

如果要把行内元素居中,只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性便可以实现居中的效果:

text-align: center;

这个简单的方法通常用在段落或者标题中的文稿内居中字句, 例如:

P { text-align: center }

居中一个块级元素

有时侯并不是文稿需要居中排列, 而是把文本块作为一个整体居中排列,或者说, 我们居中一个块级元素。

块级元素和行内元素不同,块级元素会独占一行,可以设置 width, height属性,可以设置margin 和 padding。

居中一个块级元素有一个特备重要的地方:给div设置一个宽度,然后添加margin:0 auto属性才会有效,就像这里:

div{
        width:200px;
        margin:0 auto;
   }
最终效果

codepen在线demo 居中了页面的图像。

使用技巧:居中外包围框

在支持响应式布局的页面中,添加一个外包围边框,可以方便的改变内部所有的元素宽度, 只需要调整外包围框的宽度便可以,非常有效!

页面的外包围框有几个作用:

  • 居中内容
  • 围框里所有 block 元素的默认宽度是充满父容器的宽度,不需要个别为每个元素设置宽度。

绝对定位元素的居中实现

使用CSS实现绝对定位元素的居中效果,兼容性不错的主流用法是:

.element {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -200px;    /* 宽度的一半 */
}

可是这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。 此时,往往要借助JS获得。

CSS3的兴起,使得绝对定位元素的居中实现有了更好的解决方法,就是使用transform代替margin。

transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

.element {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

于是,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。 当然这种方法的兼容性不好。

居中一个浮动元素

居中一个浮动元素和绝对定位元素的居中实现特别相似,需要重点注意的是这里宽度是必须的,确定容器的宽高, 高度可以不设,设置div的上外边距和左外边距分别是宽高的一半。

实现居中的关键就在于 margin设置与 position:relative。

.div {
    float:left
    width: 400px ;
    height: 400px;
    margin: -200px 0 0 -200px;
    position: relative;
    left: 50%;
    top: 50%;
}

codepen在线demo


评论没有加载,检查你的局域网

Cannot load comments. Check you network.