1.元素水平居中
1.1行内元素水平居中
像文本text、图像img、按钮等行内元素要实现水平居中,只需要给父元素设置text-align:center;即可。
.center{
text-align:center;
}
<div class="center">文本水平居中</div>
1.2块级元素水平居中
1.2.1定宽块级元素的水平居中:
方法1:给需要居中的块级元素设置:margin:0 auto;即可,注意块级元素必须设置宽度,否则和父元素等宽(正因为块级元素会自动填充对应方位,因此设置width后,自动填充效果会被覆盖,会有剩余空间,auto会平均分配容器的剩余空间,达到水平居中的效果)。
.main {
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
height: 50px;
width: 150px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">块级元素水平居中</div>
</div>
方法2:position+负margin:设置元素为absolute/relative/fixed;margin=负一半宽度
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 40px;
width: 100px;
left: 50%;
margin-left: -50px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">水平居中</div>
</div>
方法3:position+margin:auto
- position:absolute/relative/fixed;
- left/right:0
- width
- margin:auto;
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 40px;
width: 100px;
left: 0;
right: 0;
margin: auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">水平居中</div>
</div>
1.2.2不定宽块级元素水平居中:
方法1:给居中元素设置:display:table;再设置margin:0 auto;即可。
.main {
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
display: table;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">块级元素水平居中</div>
</div>
方法2:(多个块状元素)子元素设置:display:inline-block;同时设置父元素:text-align:center;
.main {
height: 200px;
width: 200px;
border: 1px solid black;
text-align: center;
}
.center1, .center2 {
display: inline-block;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center1">水平居中</div>
<div class="center2">水平居中</div>
</div>
方法3: 设置flex布局:将父元素设置为display:flex,justify-content:center;
.main {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
}
.center1, .center2 {
height: 40px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center1">水平居中</div>
<div class="center2">水平居中</div>
</div>
方法4:position+transform
- left: 50%;, 定位父级的50%,元素水平方向在父级的1/2宽度处,故不处于水平居中的位置。
- translate(-50%,-0) 作用是,往左(x轴)移动自身宽度的 50%,以使其居于水平居中位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父级的50% */
left: 50%;
/*自身宽度的50%(在不知道元素具体宽度的时候可以使用) */
transform: translate(-50%,0);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
2.元素垂直居中
2.1 单行文本垂直居中
- 设置paddingtop=paddingbottom;或
- 设置line-height=height;
2.2 多行文本垂直居中
通过设置父元素table,子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部(垂直方向)
.main {
height: 200px;
width: 200px;
display: table;
border: 1px solid black;
}
.center {
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
<div class="main">
<div class="center">水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中</div>
</div>
2.3块级元素垂直居中
方法1:设置flex布局:将父元素设置为display:flex;和align-items:center;
.main {
height: 200px;
width: 200px;
display: flex;
align-items: center;
border: 1px solid black;
}
.center {
height: 100px;
width: 100px;
border: 1px solid red;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法2:position+负margin:设置元素为absolute/relative/fixed;margin=负一半高度
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
margin-top: -50px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法3:position+margin:auto
- position:absolute/relative/fixed;
- top/bottom:0(定位元素具有拉伸也行,未设置width/height,absolute元素自动填充容器;width/height设置后,限制了absolute元素自动填满元素,margin:auto;自动平分被变更的尺寸空间。)
- height:
- margin:auto;
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid red;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法4:position+transform
- top: 50%;, 定位父级的50%,元素垂直方向在父级的1/2高度处,故不处于中心位置。
- translate(0,-50%) 作用是,往上(y轴)移动自身高度的 50%,以使其居于中心位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父级的50% */
top: 50%;
/*自身高度的50%(在不知道元素具体高度的时候可以使用) */
transform: translate(0, -50%);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
3.元素水平垂直居中
方法1:绝对定位+margin:auto(IE8+)
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法2:绝对定位+负margin
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法3:flex布局
.main {
height: 200px;
width: 200px;
display: flex;
justify-content: center;//子元素水平居中
align-items: center;//子元素垂直居中
border: 1px solid black;
}
.center {
height: 100px;
width: 100px;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法4:position+transform
translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。
- top: 50%;left: 50%;, 是以左上角为原点,故不处于垂直居中的位置。
- translate(-50%,-50%) 作用是,往左(x轴),上(y轴)移动自身长宽的 50%,以使其居于垂直居中的位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父级的50% */
top: 50%;
left: 50%;
/*自身宽度和高度的50%(在不知道元素具体宽度和高度的时候可以使用) */
transform: translate(-50%, -50%);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>