第一种：利用绝对定位和margin:auto实现
html：
|
1 2 3 |
<imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> body{ margin:0; } .box{ height:100vh; background-color: hotpink; position:relative; } .img{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; } </style> |
第二种：利用css3的transform属性实现
html:
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> body { margin:0; } .box { height:100vh; background-color: hotpink; position:relative; } .img { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } </style> |
第三种：利用flex布局实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> body { margin:0; } .box { height:100vh; background-color: hotpink; display: flex; /* 上下居中 */ align-items:center; /* 左右居中 但是图片高度会撑满 */ justify-content:center; } </style> |
第四种：利用grid布局实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> body { margin:0; } .box { height:100vh; background-color: hotpink; display: grid; } .img { display: inline-block; /* 上下居中 */ align-self:center; /* 左右中 */ justify-self:center; } </style> |
第五种：利用display: -webkit-box实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> body { margin:0; } .box { height:100vh; background-color: hotpink; display: -webkit-box; /* 上下居中 */ -webkit-box-align:center; /* 左右居中 */ -webkit-box-pack:center; } </style> |
第六种：利用display: flex和margin: auto实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> body { margin:0; } .box { width:100vw; height:100vh; background-color: hotpink; display: flex; } .img { margin:auto; } </style> |
第七种：利用table-cell实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> body { margin:0; } .box { /* 要有宽高 */ width:100vw; height:100vh; background-color: hotpink; display:table-cell; /* 左右居中 */ text-align:center; /* 上下居中 */ vertical-align:middle; } .img { /* 不加也可以 */ display: inline-block; } </style> |
第八种：利用display: grid和place-items: center实现
html：
|
1 2 3 |
<divclass=\”box\”> <imgsrc=\”./img/77.jpeg\”alt=\”\”class=\”img\”> </div> |
css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> body { margin:0; } div { height:100vh; background-color: hotpink; display: grid; /* 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。 */ place-items:center; } /* .img { 没有固定的宽高 } */ </style> |
到此这篇关于css中不确定盒子宽高上下左右居中的八种方法小结的文章就介绍到这了,更多相关css盒子上下左右居中内容请搜索
