提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
“实现居中”是一道必考题,针对不同的情况,使用的方法也有所不同。
提示:以下是本篇文章正文内容,下面案例可供参考
一、居中元素定宽高
初始盒子代码如下:
<style>
.box{
border: 1px solid black;
width: 300px;
height: 300px;
}
.center{
background-color: red;
text-align: center;
line-height: 100px;
}
.center_size{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<div class="center center_size">text</div>
</div>
</body>
1.absolute+负margin
.box{
position: relative;
}
.center{
position: absolute;
/*绝对定位的百分比是基于父元素的宽高计算出来的 */
top:50%;
left: 50%;
/*元素偏移后,再根据元素自身宽高的一半进行修正*/
margin-top: -50px;
margin-left: -50px;
}
2.absolute + margin auto
.box{
position: relative;
}
.center{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
3.absolute + calc
.box{
position: relative;
}
.center{
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
二、居中元素不定宽高
1.absolute + transform
代码如下:
.box{
position: relative;
}
.center{
position: absolute;
top:50%;
left: 50%;
/*css3新增的transform的translate属性可以用来设置百分比,这个百分比是基于自身宽高计算*/
transform: translate(-50%,-50%);
}
2.lineheight
代码如下:
.box{
line-height: 300px;
text-align: center;
font-size: 0px;
}
/*把要居中的元素设置为行内元素,通过text-align实现水平居中,通过vertical-align实现垂直居中*/
.center{
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
3.css-table
代码如下:
.box{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center{
display: inline-block;
}
4.flex
代码如下:
.box{
display: flex;
justify-content: center;
align-items: center;
}
.center{
text-align: center;
}