实现元素居中的多种方案

最近学习flex弹性布局,新了解了几种元素居中方案,所以来做个总结 , 如果后续有比较实用的方案,我会继续追加到文章后面, 代码已经上传至Github

web_center_demo

1. margin:0 auto;实现水平居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin_0_auto</title>
<style>
body{margin: 0;padding: 0}
/*要使用margin:0 auto实现居中, 这个元素就必须有固定的宽度 , 并且不能有position这个属性 ,不然都使用无效(不受float的影响)*/
.father{width: 900px;
height: 900px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>

<div class="father">

</div>

</body>
</html>

2.flex实现水平居中或者垂直居中(CSS3属性,完美兼容移动端)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox</title>

<style>
body{margin: 0;}

.father{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
left:0px;
top:0px;
display:flex;
/*子元素水平居中*/
justify-content:center;
/*子元素垂直居中*/
align-items:center;
}

</style>

</head>
<body>

<div class="father">
<img src="1.jpg">
</div>

</body>
</html>

3.vertical-align:middle实现水平垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0;}
.father{width: 100%;height: 100%;position: fixed;left: 0;top: 0;text-align: center;font-size: 0;/*设置font-size为了消除代码换行所造成的空隙*/background:rgba(0,0,0,0.5); }
.daughter{vertical-align: middle;}/*实现daughter居中*/
.son{vertical-align: middle;display:inline-block;height: 100%;}
</style>
</head>
<body>
<div class = "father">
<div class="son"></div>
<img class = "daughter" src="1.jpg" alt="我要居中">
</div>
</body>
</html>

4.定位和需要定位的元素的margin减去宽高的一半

这种方法的局限性在于需要知道需要垂直居中的宽高才能实现,经常使用这种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>one half</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
</style>
</head>
<body>

<!--html -->
<body>
<div class="box" >
<img src="1.jpg" alt="">
</div>
</body>

</body>
</html>

5.使用transform实现居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
body{margin: 0;}

.father {
/*绝对定位*/
position: absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.5);
}

</style>
</head>
<body>
<div class="father">
<img src="1.jpg">
</div>
</body>

</html>

6.使用text-align=center实现居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text_align</title>

<style>

*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
text-align: center;
}
img{
/*指定对象为内联块元素*/
display: inline-block;
width: 100px;
height: 100px;
/*margin: 0 auto;*/
}

</style>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="">
</div>
</body>

</html>

(完)

分享到