runfast󰀦lynda

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

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

居中一个行内元素

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

行内元素的特点:

如果要把行内元素居中,只需要把行内元素包裹在一个属性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 居中了页面的图像。

使用技巧:居中外包围框

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

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

绝对定位元素的居中实现

使用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