网页元素居中分为：垂直居中、水平居中、水平垂直都居中三种情况。这三种情况通过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 。