CSS中怎么左右上下居中显示在网页设计中,经常需要把某些元素居中显示。无论是水平居中、垂直居中还是左右上下居中,都可以通过CSS来实现。本文将重点介绍CSS中怎么左右上下居中显示。实现左右上下居中显示
<style> .box { position: absolute; left: 50%; top: 50%; width: 200px; /* 元素宽度 */ height: 100px; /* 元素高度 */ margin-left: -100px; /* 宽度一半 */ margin-top: -50px; /* 高度一半 */ } </style> <div class="box"></div>
<style> .parent { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .child { width: 200px; height: 100px; } </style> <div class="parent"> <div class="child"></div> </div>
粉丝
0
关注
0
收藏
0