CSS布局-对齐方式

一、水平居中

行内元素的水平居中

如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline-block,使子元素变成行内元素,这时候行内元素不会继承父元素的宽度,它宽度为其内容的宽度;

行内元素

1
2
3
4
5
<div class="parent">
<div class="child">
<p>Demo</p>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
body{
margin:0;
}
.parent{
background: #333;
text-align: center;
}
.child{
display: inline-block;
background: #ccc;
}

块状元素的水平居中(定宽)

当被设置元素为定宽块级元素时用 text-align:center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。

块状元素的水平居中(定宽)

1
2
3
<div class="parent">
<div class="child"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
body{
margin:0;
}
.parent{
background: #333;
}
.child{
width: 200px;
height: 50px;
margin: 0 auto;
background: #ccc;
}

块状元素的水平居中(不定定宽)

在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素加text-align:center 来实现居中效果。(文字内容区域居中)

当不定宽块级元素的宽度不要占一行时,可以设置display 为 inline 类型或inline-block(设置为 行内元素 显示或行内块元素)

块状元素的水平居中(不定定宽)

1
2
3
4
5
6
7
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body{
margin:0;
}
.container{
text-align:center;
background: #333
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
.container li{
margin-right:8px;
display:inline-block;
}
.container li a{
color: #fff;
text-decoration: none;
}

二、垂直居中

首先设定两个条件,父元素是盒子元素且高度已经固定

子元素是行内元素,高度是由其内容撑开

这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中(line-height子元素是可以继承的,所以给父元素或者子元素设置都可以)

垂直居中

1
2
3
<div class="container">
<p>demo</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
body{
margin:0;
}
.container{
background: #333;
height: 200px;
}
.container p{
color: #fff;
line-height: 200px;
}

子元素是块级元素(定高或者不定高)

在这里可以使用相对定位进行操作

子元素是块级元素(定高或者不定高)

1
2
3
<div class="wrap">
<div class="child">demo</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
margin:0;
}
.wrap{
width: 100%;
background: #333;
height: 200px;

}
.child{
background: #ccc;
position: relative;
top: 50%;
transform: translateY(-50%);
}

水平垂直居中

水平对齐+行高

水平对齐+行高

1
2
3
<div class="wrap">
<p>demo</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
body{
margin:0;
}
.wrap{
width: 100%;
background: #333;
height: 200px;
line-height: 200px;
text-align: center;
}
.wrap p{
color: #fff
}

水平+垂直对齐

text-align + vertical-align

在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素

水平+垂直对齐

1
2
3
<div class="wrap">
<div class="container">demo</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
margin:0;
}
.wrap{
width: 1%;
padding: 80px 0;
text-align: center;
vertical-align: middle;
display: table-cell;
background: #333;
}
.container{
background: #ccc;
display: inline-block;
}

若子元素是图像,可不使用table-cell,父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle

既然设置为内联那么就会受空白区域的影响,这时候就需要用font-size:0

1
2
3
<div class="parent">
<img class="child">
</div>
1
2
3
4
5
6
7
8
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}

相对+绝对定位

使用absolute,利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto

相对+绝对定位

1
2
3
<div class="wrap">
<div class="container">demo</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body{
margin:0;
}
.wrap{
position: relative;
background-color: #333;
/* height:100px; */
padding: 80px 0;
}
.container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 80px;
margin: auto;
background: #ccc;
}
本文结束感谢您的阅读
0%