csslabel居中布局_css-⽔平居中、垂直居中、⽔平垂直居中⽅
法
⾸先呢先介绍下居中的⽅法都有哪些？
1.⽂字⽔平垂直居中代码⽚段
<!-- html部分 -->
<div class="center">⽂字⽔平垂直居中</div>
/* css部分 */
.center{
text-align: center;
width: 300px;
height: 200px;
background: indianred;
line-height: 200px;
建筑设计竞赛}
2.⾏内元素⽔平居中
//html部分：
<div class="center">⽔平居中</div>
/* css部分 */
.center{
text-align: center;
}
3.块级元素⽔平居中
1.定宽元素⽔平居中
只需给需要局中的块级元素加margin：0 auto，
但这⾥需要注意的是，这⾥的块元素的宽度width值要有
html部分
<div class="center">⽔平居中</div>
css部分
.center{
width:200px;
magin: 0 auto;
border:1px solid red;
}
1.2.不定宽块级元素⽔平居中
不定宽，就是块级元素宽度不固定
⽅法1：设置table，通过给要居中显⽰的元素，
设置display：table，然后设置margin：0 auto来实现
<!-- html部分 -->
<div class="center">⽔平居中</div>
/* css部分 */
.center{
display: table;
margin: 0 auto;
border: 1px solid red;
}
1.3.设置inlie-block（多个块元素）
⼦元素设置inline-block，同时⽗元素设置text-align：center
肢成语<!-- html部分 -->
<div class="center">
<div class="inlineblock-div">1</div>
<div class="inlineblock-div">2</div>
</div>
/* css部分 */
.center{
text-align: center;
}
.inlineblock-div{
display: inline-block;
}
1.4.设置flex布局
只需把要处理的块元素的⽗级设置display：flex，justify-content：center；
<!-- html部分 -->
<div class="center">
<div class="flex-div">1</div>
<div class="flex-div">2</div>
</div>
/
* css部分 */
.center{
display: flex;
justify-content: center;
}
2.垂直居中
2.1单⾏⽂本垂直居中
<!-- html部分⽅案⼀ -->
<div class="center">
123
</div>
/
* css部分⽅案⼀ */
.center{
padding-top:50px;
padding-bottom:50px;
background: indianred;
}
<!-- html部分⽅案⼆ -->
<div class="center">
123
</div>
/* css部分⽅案⼆ */
.
center{
width: 300px;
height: 200px;
line-height: 200px;
background: indianred;
}
2.2多⾏⽂本垂直居中
通过设置⽗元素table，⼦元素table-cell和vertical-align
vertical-align：middle的意思是把元素放在⽗元素的中部
<!-- html部分 -->
<div class="center">
<div class="table-div">多⾏⽂本垂直居中</div>
</div>
/* css部分 */
.center{
width: 300px;
height: 200px;
display: table;
border: 2px solid blue;
}
.table-div{
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
2.3块级元素垂直居中
⽅法1：flex布局
在需要垂直居中的⽗元素上，设置display：flex和align-items：center 注意：⽗元素必须要设置height值
<!-- html部分 -->关于坚强的句子
<div class="center">
<div>垂直居中</div>
</div>
/* css部分 */
.center{
董永故里在哪里width: 300px;
height: 200px;
display: flex;
align-items: center;
border: 2px solid blue;
}
2.4利⽤position和top和负margin（需知宽⾼）
1.设置元素为absolute/relative/fixed
2.margin=负⼀半
/* css部分 */
.
parent{
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
}
.child{
position: absolute;
height: 100px;
width: 150px;
top: 50%;
margin-top: -50px;
line-height: 100px;
background-color: red;
}
吝惜的反义词2.5利⽤position和top/bottom和margin:auto（注意不是margin:0 auto）
1.position：absolute/relative/fixed
盗号3.margin:auto
<!-- html部分 -->
<div class="parent">
<div class="child">已知⾼度垂直居中</div>
</div>
/* css部分 */
.parent{
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
}
.child{
position: absolute;
height: 100px;
width: 150px;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
background-color: red;
}
2.6利⽤position和top和transform
transform中的translate偏移的百分⽐就是相对元素⾃⾝的尺⼨⽽⾔的。
transform⽅法，可⽤于未知元素⼤⼩的居中
/* css部分 */
.
parent{
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
}
/* 不知道被居中元素的尺⼨ */ .child{
position: absolute;
top: 50%;
transform: translate(0,-50%); line-height: 100px;
background-color: red;
}
3、⽔平垂直居中
⽅法1：绝对定位+margin：auto
<!-- html部分 -->
<div></div>
/* css部分 */
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;草裙舞女
抗美援朝历史
bottom: 0;
right: 0;
margin: auto;
}
⽅法2：绝对定位+负margin
<!-- html部分 -->
<div></div>
/* css部分 */
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
⽅法3：绝对定位+transform
