导读:
CSS
的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中。根据父、子元素的高度是否清楚,又会使得不同的居中用不同方法。本文就其中一些情况做下简单说明,以作笔记之用,仅供大家参考。
1、文本居中
先上示例中的结构:
<!-- html 结构 -->
<div class="parent">
<span class="child">some text</span>
</div>
<!-- 以便查看效果添加如下样式 -->
.parent {
border: 1px solid #000;
}
.child {
}
1-1、水平居中
文本在元素内居中对齐,可以使用 text-align: center;
。因为 text-align
属性是会被继承的,所以写在父元素或者子元素上都可以实现居中,这里我们对父元素进行设置:
.parent {
text-align: center;
}
1-2、垂直居中
1-2-1、文本在元素内垂直对齐,可以使用设置 line-height
的值为包含元素的高度,所以这里我们需要设置父元素的高度。line-height
属性同样会被继承,这里我们对子元素进行设置:
.parent {
height: 60px;
}
.child {
line-height: 60px;
}
1-2-2、也可以对父元素使用 padding
进行居中,:
.parent {
padding: 30px 0;
}
1-3、水平垂直居中
1-3-1、如果要水平和垂直都居中,可以使用 line-height
和 text-align: center;
。
.parent {
text-align: center;
height: 60px;
line-height: 60px;
}
1-3-2、也可以使用 padding
和 text-align: center;
。
.parent {
text-align: center;
padding: 30px 0;
}
自然直接使用 padding: 30px;
也可以实现水平垂直居中。
2、块元素居中
同样先上示例中的结构:
<!-- html 结构 -->
<div class="parent">
<div class="child"></div>
</div>
<!-- 以便查看效果添加如下样式 -->
<!-- 如果实例中没有指明需要知道父、子元素的高度或宽度则对应方法对此不作要求 -->
.parent {
height: 80px;
border: 1px solid #000;
}
.child {
height: 40px;
width: 80%;
background-color:#c0c0c0;
}
2-1、水平居中
2-1-1、要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
。
.child {
margin: 0 auto;
width:80%;
}
注意:该方法必须设置子元素的 width 属性(且不能为100%)。
2-1-2、在父元素中设置 text-align: center;
,子元素中设置 display: inline-block;*zoom:1;
。
.parent {
text-align: center;
}
.child {
display: inline-block;
*zoom:1; /* 兼容 IE6、7 */
}
2-1-3、在子元素中设置 display:table;margin: 0 auto;
。
.child {
display: inline-block;
*zoom:1; /* 兼容 IE6、7 */
}
2-1-4、absolute
配合 transform
。
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
2-1-5、强大的 flex
布局中的 justify-content: center;
。
.parent {
display: flex;
justify-content: center;
}
2-2垂直居中
2-2-1、对父元素设置 display: table-cell;vertical-align:middle;
。
.parent {
display: table-cell;
width:100px; /* 对table-cell元素设置百分比(如100%)的宽高值时无效的,所以我们需要这样设置 */
/* 但是可以将父元素设置display:table,再将父元素设置百分比宽高 */
/* 子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中 */
/* 此处为不破坏文章结构,实例采用并非上面展示的 width:100px; 而是第二种方法 */
vertical-align:middle;
}
2-2-2、absolute
配合 transform
。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2-2-3、强大的 flex
布局中的 align-items: center;
。
.parent {
display: flex;
align-items: center;
}
2-3、完美居中(水平+垂直)
2-3-1、absolute
配合 transform
。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
2-3-2、强大的 flex布局
。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
写在最后
实现居中的方法还有许多,根据不同的情况也会有不同的处理方式,本文只是简单的记录了其中一些,且涉及到一些兼容性并没有提及,学习需谨慎,若是文中有什么错误,欢迎指正。