html布局居中

居中效果

目录

• 居中效果
  • 居中效果: 文本
    • 文本：水平居中
    • 文本：垂直居中
  • 居中效果：块元素
    • 相对父元素：水平居中
    • 相对父元素： 垂直居中
    • 相对父元素：全局居中
    • 使子元素： 垂直居中
  • 居中效果: 背景图片

居中效果: 文本

文本：水平居中

1. 设置text-align:

   text-align: center;
   

文本：垂直居中

1. 设置行高等于容器高度(单行文本)

   height: 25px;
   line-height: 25px;
   

居中效果：块元素

相对父元素：水平居中

1. 设置margin

   margin：0 auto;
   

相对父元素： 垂直居中

2. 使用绝对定位

   /*父元素开启相对定位*/
   /*自身高度确定*/
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto 0;
   

相对父元素：全局居中

1. 使用绝对定位

   /*父元素开启相对定位*/
   /*自身宽高度都确定*/
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   

2. 通过transform居中(css3)

   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
   

使子元素： 垂直居中

1. 使用display

   display:table-cell;
   vertical-align: middle;
   

2. 父元素高度auto,设置上下padding一致

   padding:  2px 0;
   

居中效果: 背景图片

background-position: center;