水平居中和垂直居中的方法

一、元素水平居中的方法：

第一、内联元素：父级元素设置：text-align:center;

第二、块级元素：

1、设置left和right，使用margin:0 auto;

2、pisition:relative;

left:50%;

margin-left:-(width/2);

二、垂直居中的方法，总结如下：

第一、单行文本垂直居中：

设置元素的height和line-height，使其保持一致；

第二、内层div在外层div内垂直水平居中：

1、外层div设置position:relative;

2、内层div设置绝对定位，设置width和height，left和top设置为父元素的50%，然后使用margin-top和margin-left为自身的一半，即可实现垂直和水平居中。{position:absolutive;width:100px;height:100px;left:50%;top:50%;margin-left:50px;margin-top:50px}

第三、vertical-align:middle属性(张大神博客)

1、对对象元素使用vertical-align:middle

值	描述
长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %	通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

1）使用数值：例如input{vertical-align:middle}，常用于解决使用单选框和复选框后与12像素文字上下偏移的问题。

。

2）适用元素：只有一个元素是inline或line-block时，vertical-align才会起作用；

例如图片，按钮，单复选框，单行/多行文本框等HTML控件