水平居中与垂直居中

水平居中

text-align:center

• 单行文本居中

<div class='box'>
   hello你好
</div>

.box{
    text-align: center;
}

• 单行文本和a链接

<div class='box'>
  hello
  <a class='bt'>点我</a>
</div>

.box{
  border: 1px solid red;
 text-align: center;
}
.bt{
  padding: 3px;
  color:#fff;
}

padding:3px的话按钮会超出border,因为上下padding的背景会占用，但内容不变，如果想要按钮在边框里面，只需设置inline-block。

• 两个按钮居中

<div class='box'>
  <a class='bt'>点我</a>
  <a class='bt'>点我</a>
</div>

.box{
  text-align: center;
}
.bt{
  display: inlie-block;
}

• 图片也是text-align:center;

块级元素居中

因为块级元素本身就是占满一行的所以，无所谓居中不居中，一般说的块级元素居中指的是有固定宽度的元素。只需margin:0 auto+固定宽度

垂直居中

第一种思路

• 一般高度是由内容撑开的，所以只需要padding-top=padding-bottom就行了
• 单行文字/按钮，在本元素上加height=line-height当然也可以用上面的方法。

第二种思路

• 内联元素

1. 外部的div如果是固定的宽度，则直接写line-height=高度
2. 如果高度不是固定的则直接写上下padding相等。

• 块级元素
  上下padding相等或者line-height=height
  以上这种常规的写法可以满足60%的需求。
  脱离文档流的元素都是块级元素，即使span元素。并且定位后才能用z-index。
• 浮动元素居中
  浮动元素不可能居中。
  如果发现把浮动元素居中则需求有问题，此时应该去掉浮动用inline-block元素。
• 绝对定位元素居中

1. 固定宽高元素绝对定位
2. 不固定宽高
   固定宽高绝对定位
   .element{
   width: 600px;
   height: 400px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -200px;
   margin-left: -300px;
   border: 1px solid;
   }
   不固定宽高
   css3中的transform
   .box{
   position: absolute;
   border: 1px solid black;
   width: 300px;
   padding: 10px;
   left: 50%;
   top: 20%;
   box-sizing: border-box;
   transform: translate(-50%,-20%)
   }
   margin:auto实现绝对定位元素的居中

.element{
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}