HTML各种情况居中总结

前提：　父盒子固定大小（宽高），其里面的“内容”在水平和垂直方向的居中对齐的常见做法：

内部居中：

水平居中：

　　A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置text-align:center;

　　B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同文字（Ａ）

　　C：“内容”为块元素： margin:0 auto;

垂直居中：

　　A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置line-height为父盒子的高度；

　　B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同块元素（Ｃ）

　　 C：“内容”为块元素： 在块元素上设置：position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值

外部居中：

img与textarea与其紧挨着的文字垂直居中对齐：设置其vertical-align:middle;

input与紧挨着的文字自然垂直居中

HTML各种情况居中总结,布布扣,bubuko.com