|
首要呢先介绍下居中的办法都有那些？
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
| 
发表于 2024-6-30 05:52:19