首先呢先介绍下居中的方法都有哪些?
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