前提: 父盒子固定大小(宽高),其里面的“内容”在水平和垂直方向的居中对齐的常见做法:
内部居中:
水平居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置text-align:center;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):同文字(A)
C:“内容”为块元素: margin:0 auto;
垂直居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)
C:“内容”为块元素: 在块元素上设置:position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值
外部居中:
img与textarea与其紧挨着的文字垂直居中对齐:设置其vertical-align:middle;
input与紧挨着的文字自然垂直居中