在制作网页的过程中,我们有时需要使用CSS来实现页面元素居中显示。该如何实现呢?
使用CSS实现页面元素居中显示的有以下4种方法:
1.使用自动外边距实现居中
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div.
需要特别注意的是,必须为该容器指定宽度
。
如:<div id="wrapper"></div>
#wrapper{
width:750px;
margin:0 auto;
}
2.使用text-align实现居中
另一种实现元素居中的方法是使用text-align属性,将该属性设置为center并应用到body元素上即可。即 body{text-align:center; }。这样设置后,body的所有子孙元素都会被居中显示。body里面的子孙如果不用居中显示,则需另外设置text-align.如body中有p标签中的元素需要居左显示。使用p{text-align:left;}即可实现。
3.组合使用自动外边距和文本对齐
因为文本对齐居中方式有着良好的向下兼容性,则自动外边距方式也被大多数当代浏览器支持。将二者组合起来使用,以期让居中效果得到最大限度的跨浏览器支持。
如:<div id="wrapper"></div>
body {
text-align:center;
}
#wrapper{
width:750px;
margin:0 auto;
text-align:left
}
4.负外边距解决方案
负外边距解决方案不是仅仅为元素添加负外边距那么简单。
这种方法需要同时使用绝对定位和负外边距两种技巧
。
此方案的具体实现方法为:首先创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边缘50%的位置。这样,
该容器的左外边距将从页面50%宽度的位置开始算起。然后,将容器的左外边距值设置为负的容器宽度的一半。这样既可将该容器固定在页面水平方向的中点。
如<div id="wrapper"></div> #wrapper{
width:750px;
left:50%;
position:absolute;
margin-left:-325px;
}
ps :在计算时要格外小心,无论是内边距还是边框都要计算在容器宽度中,否则将不会得到期望的结果。
转载于:https://blog.51cto.com/bana520/850538