盒子上下、左右居中对齐的常见方式

您所在的位置：网站首页 › 靠下居中怎么弄 › 盒子上下、左右居中对齐的常见方式

盒子上下、左右居中对齐的常见方式

2024-07-13 02:48| 来源: 网络整理| 查看: 265

盒子居中对齐的常见方式

首先 html 布局，两层盒子，实现子盒子相当于父盒子上下、左右分别对齐。

然后编写 CSS 实现的具体几种方法如下：

1 第一种：使用CSS的 position 属性和margin: auto; .div1 { width: 100px; height: 100px; border: 1px solid red; position: relative; } .div2 { width: 50px; height: 50px; background-color: red; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 2 第二种：利用css3的新增属性 display: table-cell; vertical-align:middle; .div1 { width: 100px; height: 100px; border: 1px solid red; display: table-cell; vertical-align: middle; } .div2 { width: 50px; height: 50px; background-color: red; margin: auto; } 3 第三种：利用flexbox布局 .div1 { width: 100px; height: 100px; border: 1px solid red; display: flex; justify-content: center; align-items: center; } .div2 { height: 50px; width: 50px; background-color: red; } 4 第四种：利用 position 和 margin-left 的属性

margin-left 的值取负自身的一半，此方法需要知道自身宽度，而且后期做调整比较麻烦

.div1 { width: 100px; height: 100px; border: 1px solid red; position: relative; } .div2 { height: 50px; width: 50px; background-color: red; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; } 5 第五种：利用 position 和 transform 的属性

此方法需要考虑兼容问题

.div1 { width: 100px; height: 100px; border: 1px solid red; position: relative; } .div2 { height: 50px; width: 50px; background-color: red; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

【本文地址】

盒子上下、左右居中对齐的常见方式

盒子上下、左右居中对齐的常见方式

今日新闻

推荐新闻