利用margin:auto编辑一段水平垂直居中的代码
时间: 2023-07-03 20:28:05 浏览: 94
通过css属性margin:auto让Div中的Table居中
当你想要在页面中居中显示一个元素时,可以使用以下 CSS 代码:
```css
.center {
position: absolute; /* 或者设置为 relative */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
上面的代码将元素的位置设置为绝对定位,并将其顶部和左侧都设置为50%。然后,使用 transform 属性将元素在水平和垂直方向上向左和向上移动了自身宽度和高度的一半,以达到完全居中的效果。
如果你想要同时使用 margin:auto 来实现水平垂直居中,可以使用以下代码:
```css
.center {
position: absolute; /* 或者设置为 relative */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
```
上面的代码将元素的位置设置为绝对定位,并将其上、下、左、右都设置为0,然后再使用 margin:auto 属性将元素水平和垂直居中。
阅读全文