首要呢先介绍下居中的办法都有那些?
1.文字水平垂直居中代码片段
<!-- html部分 -->
<div class="center">文字水平垂直居中</div>/* css部分 */
.center{
text-align: center;
width: 300px;
height: 200px;
bac公斤round: 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;
bac公斤round: indianred;
}<!-- html部分方法二 -->
<div class="center">1
|