关于HTML的基本布局（一）

HTML的基本布局

• 单列布局（水平居中）
  

DOM文档中结构如下，若要子元素在父元素中居中：

<div class="parent">
      <div class="child">这里是内容</div>
</div>

(1)使用margin：0 auto实现（子元素比父元素小时）

.child{width:200px;margin:0 auto;}

优：兼容性好

缺：需设置子元素宽度

(2)使用table实现

.child{display:table;margin:0 auto;}

优：只需对自身样式进行设置

缺：IE6,7版本需调整结构

(3)使用text-align：center或inline-block实现

.parent{text-align:center;}
.child{display:inline-block;}

优：兼容性好

缺：需同时设置父元素和子元素宽度

(4)使用绝对定位实现

.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(-50%);}

缺：兼容性差

• 单列布局（垂直居中）

(1)使用vertical-align：center实现

.parent{display:inline-block;vertical-align:middle;line-height:20px;}

(2)使用绝对定位实现

.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(0,-50%);}

(3)使用flex实现

.parent{display:flex;align-items:center;}

• 单列布局（水平垂直都居中）

(1)使用vertical-align，text-align，inline-block实现

.parent{display:table-cell;text-align:center;vertical-align:middle;}
.child{display:inline-block;}

(2)绝对居中（已知子元素宽高，且margin-left和margin-top为具体数值：-子元素的一半）

.parent{position:relative;}
.child{position:absolute;left:50%;margin-left:-50%;top:50%;margin-top:-50%;}

(3)万能居中（子元素比父元素小，且需要知道尺寸）

.parent{position:relative;}
.child{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}

(4)使用flex实现

.parent{display:flex;justify-content:center;align-items:center;}