css使用position定位如何让元素居中

2023-12-18 01:04| 来源: 网络整理| 查看: 265

使用position生成绝对定位的元素 absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

如何让元素居中方法一

针对已知宽高，可使用margin

.box{ width:600px; height:300px; position:absolute; /*position:fixed;*/ left:50%; top:50%; margin-left:-300px;/*宽度的一半*/ margin-top:-150px;/*高度的一半*/ }

或者使用

margin:auto; 方法二

使用css3中的transform，未知宽高和已知宽高都可使用 1.横向居中

.box{ width:auto; height:40px; padding:20px; position:absolute; top:50px; left:50%; transform:(-50%,-50%); }

2.横竖都居中，将上面top改为

top:50%;

【本文地址】

今日新闻