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%;
}