子元素垂直、左右居中的问题
转载自何来笑红尘的博客
直接开始,父级元素默认display:block;
html部分
1
2
3
| <div class="c-middle-box">
<div class="c-middle"></div>
</div>
|
css部分
1、使用CSS3中新增属性tranform相关知识实现（推荐使用）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .c-middle-box{
position: absolute;
width: 100%;
height: 100%;
background: #63eefe;
}
.c-middle{
position: relative;/* position一定要设置，但不可设置为static*/
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
left: 50%;/* left值固定*/
top: 50%;/* top值固定*/
transform: translate(-50%,-50%);/* translate值固定*/
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
|
注：父级绝对定位，是为了更好的展示示例。在实际项目中可根据实际情况而定。(在谷歌浏览器中如果父级元素没有高度，会导致此方法无效；)
2、 绝对定位方式来上下左右居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| position: absolute;
width: 100%;
height: 100%;
background: #63eefe;
}
.c-middle{
position: absolute;/*值固定*/
left: 0;/*值固定*/
right: 0;/*值固定*/
bottom: 0;/*值固定*/
top: 0;/*值固定*/
width:50%;
height:50%;
margin: auto;/*值固定*/
}
|
3、父级元素display:table-cell
1
2
3
4
5
6
7
8
9
10
11
12
| .c-middle-box{
display: table-cell;/*值固定*/
width: 618px;
height: 330px;
background: #63eefe;
text-align: center;
vertical-align: middle;/*值固定*/
}
.c-middle{
display: block;
margin: 0 auto;
}
|
注：如果子元素为inline-block,那么c-middle内样式可不写；
4、子元素inline-block方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .c-middle-box{
display: block;
width: 618px;
height: 330px;
line-height:330px;/* line-height一定要等于自身的高度 */
background: #63eefe;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.c-middle{
display: inline-block;
font-size: 16px;
line-height:1;/* 为避免继承父级元素line-height。此处可根据实际情况重新设置line-height */
}
|
父级元素设置font-size:0;是因为display:inline-block;有默认的边距，这样做是为了消除边距。子元素可根据实际情况重新设置font-size:;如果在一些浏览器中还存在边距。可以试试在父级样式加上letter-spacing: 0
转载自何来笑红尘的博客