CSS常用布局学习笔记

水平居中—行内元素

如果是文字和图片这类的行内元素，则在其父级元素上加上样式：text-align:center;

水平居中—定宽块元素

div{
  width:100px;
  margin:0 auto;
}

水平居中—不定宽块元素1

步骤：

1. 添加table元素
2. table的左右margin设置为auto

<table>
    <tbody>
        <tr>
            <td><div class="wrap">
  设置我所在的div容器水平居中
</div></td>
        </tr>
    </tbody>
</table>

table{margin: 0 auto;}
.wrap{background: #333;color: #fff;}

水平居中—不定宽块元素2

步骤：

1. 设置该块元素为display:inline;
2. 设置该元素的父元素text-align:center;

水平居中—不定宽块元素3

步骤：

1. 设置父级元素样式为float:left;position:relative;left:50%;
2. 设置该元素样式为position:relative;left:-50%;

垂直居中—父元素高度确定的单行文本

设置父元素的 height和line-height一致即可

垂直居中—父元素高度确定的多行文本1

针对父元素高度确定的多行文本、图片、块状元素的竖直居中

步骤：

1. 父元素外加table
2. 子元素设置vertical-align="middle"【只对td、th有效，且默认为middle，所以不写也可】

垂直居中—父元素高度确定的多行文本2

针对父元素高度确定的多行文本、图片、块状元素的竖直居中

设置父元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。