css常见布局(二)

css水平居中

1. 行内元素

行内元素(文字,图片等)可以给父级元素设置text-align:center,使子级行内元素居中;

2 . 块级元素

给该元素设置margin:auto;

代码部分

3 . 不定宽的块级元素

       3.1  父元素为table标签;

代码部分

实际效果

       3.2 将子元素设置为inline,再给父元素添加text-align:center;

代码部分

        3.3 给父级设置dispaly:inline-block,再用绝对定位position: relative并设置left:-50%;

代码部分

css垂直居中

1. 可以通过给确定高度的父级设置line-hight等于该高度,让是文本类的子元素居中;

2 .利用 position: absolute和margin:auto实现.

代码部分

实际效果

3 .利用 position: absolute和margin:top实现.

代码部分

4 .创建一个无意义的标签,让它占据整个盒子一半的高度,从而在展示上达到垂直居中;

代码部分

5 .给父级设置table-cell,和文本居中vertical-align:middle配合

代码部分

实际效果