【持续更新】CSS居中
水平垂直居中
- 知道自身的宽度、高度
<div class="test"></div> <style> .test { position: absolute; height: 200px; width: 200px; left: 50%; /* 父级宽度的50% */ top: 50%; /* 父级高度的50% */ margin-left: -100px; margin-top: -100px; border: 1px solid #000000; /* 方便看效果 */ } </style>
原理:先水平、垂直定位到父级的中间(父级宽度和高度的一半),再向左、上平移自身宽度、高度的一半,即可完成水平、垂直居中。
- 不知道自身的宽度、高度
<div class="test"></div> <style> .test { position: absolute; height: 200px; width: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #000000; /* 方便看效果 */ } </style>
原理:同上一种方法一样,先水平、垂直定位到父级的中间(父级宽度和高度的一半),再向左、上平移自身宽度、高度的一半,而translate里面是自身的百分百,所以不需要知道自身的宽度。