淘先锋技术网

首页 1 2 3 4 5 6 7

CSS定位居中显示是网页设计中最基本的技能之一,为了让网页看起来更美观,我们需要让一些特定的元素居中显示,例如页面标题、图片等等。

CSS定位分为静态定位、相对定位、绝对定位、固定定位四种类型,其中绝对定位和固定定位才是可以使用居中显示的位置属性。下面我们来分别介绍一下这两种方式。

/* 绝对定位居中显示,需要定义top、left与margin为auto*/
.position-absolute{
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}

代码中的-50px是元素宽度与高度的一半,通过margin属性与top、left相结合,可以实现居中显示。

/* 固定定位居中显示,与绝对定位类似 */
.position-fixed{
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}

这种方式与绝对定位的区别是,它相对于浏览器窗口定位,不会随着页面滚动而改变位置。

总结一下,CSS定位的居中显示可以使用绝对定位和固定定位两种方式实现,其中需要注意的是,需要将元素的宽度和高度减去一半,并将margin属性设置为auto。