- 利用绝对定位（absolute）和外边距（margin）
说明：这种方式适用子级的宽(width)高(height)固定，将父级(box)设置成相对定位(position: relative)，将子级(content)设置成绝对定位（相当于其父级），top、left给50%，再用margin-top=-(子级高度的一半)，margin-left=-(子级宽度的一半)。
代码：
/* 这里是css样式的内容 */
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<!-- 这是是html的内容 -->
<div class="box">
<div class="content"></div>
</div>
显示效果如下：
3868852-054510e13491eec4.png
- 利用绝对定位（absolute）和外边距（margin:auto）
说明：这种方式可适用子级的宽(width)高(height)不固定，将父级(box)设置成相对定位(position: relative)，将子级(content)设置成绝对定位（相当于其父级），top、left、right、bottom给0，再用margint=auto。
代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="box">
<div class="content"></div>
</div>
显示效果如下：
3868852-054510e13491eec4.png
- 利用绝对定位（absolute）和transfrom
说明：此方法利用了定位和CSS3的形变，另外不需要知道居中元素的宽高就可以使用。
代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="box">
<div class="content"></div>
</div>
显示效果如下：
3868852-054510e13491eec4.png
- 利用表格（diplay：table-cell）
说明：此方法把其父级变成表格样式，再利用表格的样式来进行居中。
注意：子级如果为块元素就得加margin:0 auto;也可子级设为行内元素(display:inline-block)。两种方式。
代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
/* margin: 0 auto;*/ /* 方式一 */
display: inline-block; /* 方式二 */
}
</style>
<div class="box">
<div class="content"></div>
</div>
显示效果如下：
3868852-054510e13491eec4.png
- 利用弹性盒模型（flexBox）
说明：此方法，利用了CSS3的新特性flex。不需要知道居中元素的宽高就可以使用。但需要注意的是：在移动端使用完美，但pc端有兼容性问题。
代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
display: flex;
justify-content: center;
align-items:center;
}
.content{
padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */
background-color: blue;
}
</style>
<div class="box">
<div class="content"></div>
</div>
显示效果如下：
3868852-054510e13491eec4.png
- 基线对齐方式（vertical-align:middle）
说明：此方法，设置了一个“参照物(reference)”和容器一样高一样，然后在父级设置水平对齐方式( text-align:center)，并在参照物和子级设置基线对齐方式(vertical-align:middle)。不需要知道居中元素的宽高就可以使用注意：需要将参照物和子级都设成行内块元素( display:inline-block)
代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
text-align:center;
}
.content{
padding: 50px; /* 此处的padding只是为展示子级宽高不定，由内容撑开 */
background-color: blue;
display:inline-block;
vertical-align:middle;
}
.reference{
width:0px;
height:100%;
display: inline-block;
vertical-align:middle;
}
</style>
<div class="box">
<div class="content"></div>
<span class="reference"></span>
</div>
显示效果如下：
3868852-054510e13491eec4.png
本人遇到的或者工作过中使用的先总结到这里，以后有新方式还有补充ing....
网友评论