随心笔记|盒子居中布局的方法

    技术2022-07-11  89

    常见布局中,盒子有水平居中和垂直居中,具体方法实现如下: 假定两个盒子一个父盒子一个子盒子 1.定位方法的实现: 水平居中: 子盒子: left:50%; margin: 子盒子自身宽度一半的像素; 垂直居中: 子盒子: top:50%; transform: translate(0,-50%); 总结:定位的方法很简单,父盒子的一半,在左移动子盒子自身的一半,水平和垂直一样的思想,注意定位子绝父相。 2.弹性布局属性的实现: 水平居中: 父盒子: display: flex; jusitify-content: center; 垂直居中: 父盒子: display: flex; align-items: center; 总结:弹性盒子相对于定位更加简洁灵活,操作简单。 随心笔记加自己的小小见闻。

    Processed: 0.013, SQL: 9