- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
网页元素居中分为:元素水平居中、元素垂直居中、元素水平垂直都居中。当然,我们使用最多的还是元素水平居中。元素垂直居中有时也会用到,如表格中和表单中可能会用到。元素的水平和垂直方向都居中,这个用的比较少,但有时也会用到,如:用户登录弹窗、客服弹窗等,这些可能就会用到水平和垂直都要居中。不管是什么居中,我们通过css都是可以比较容易实现的。下面,我就来就以往的学习使用到的CSS居中做一个总结。
一:水平居中
1、文字水平居中:
p{ width:800px; text-align:center; }
p元素宽度800像素,文字水平居中。要设置宽度哦,没有宽度,如何居中。
2、div元素水平居中:
方法1:通过百分比来控制左右2边的距离
div{ width:80%; margin:0 10%; }
方法2:通过margin:0 auto;
div{ width:400px; margin:0 auto; }
div元素中不能添加浮动float,否则居中会失效。
二:垂直居中
文字或内连元素实现垂直居中。
方法一:通过line-height
p{ height:30px; line-height:30px; }
方法二:通过padding
p{ padding:10px 0; }
方法三:vertical-align
<div style="width: 400px;height:100px;background: #ccc; ">
<em style="vertical-align: middle;">hhhh</em>
<span style="vertical-align: middle; display:inline-block;height: 100%"></span>
</div>
em元素的居中,是以<span>行内元素的最高值进行居中的,以上<em>标签是以<span>的高度进行居中的。span元素必须设置成inline-block内连块状元素。如果去掉<span>,em自己通过vertical-align:middle 是实现不了垂直居中的。
verticla-aling在表格的单元格中也是可以使用的。
三:水平垂直都居中
水平和垂直都居中,这种情况不是很常用,但是有时,还是要用到的,如:弹窗,显示在水平垂直都居中比较友好。
div{
width:300px; height:300px;
position:fixed;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
这里用到了position:fiexed 绝对定位。这是相对于整个页面的居中。如果想让一个div元素相对于父元素水平垂直居中,可以把position:absolute相对定位,这要求父元素设置相对定位position:relative 。
好了,以上就是我对页面元素居中的一些总。如果还有哪些没有写到,请在底部留言哦,我们后期进一步完善。
元素居中我有学会了这么多招!赞!