CSS完美实现元素居中的一些总结

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

网页元素居中分为：元素水平居中、元素垂直居中、元素水平垂直都居中。当然，我们使用最多的还是元素水平居中。元素垂直居中有时也会用到，如表格中和表单中可能会用到。元素的水平和垂直方向都居中，这个用的比较少，但有时也会用到，如：用户登录弹窗、客服弹窗等，这些可能就会用到水平和垂直都要居中。不管是什么居中，我们通过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 。

好了，以上就是我对页面元素居中的一些总。如果还有哪些没有写到，请在底部留言哦，我们后期进一步完善。