css2与css3各类元素的居中解析

先解析一下下面要讲的元素的含义。

块级元素

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时，默认为100%

  4.块级元素中可以包含块级元素和行内元素

行内元素

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不可以改变

  4.行内元素只能行内元素，不能包含块级元素

常见的块状元素有：

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>

常见的内联元素有：

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>

css2水平居中

1.text-align:center;

text-align适用范围

（1）.text-align不会作用于块级元素。

（2）.text-align作用于文本。

（3）.text-align作用于内联元素。

（4）.text-align作用于图片。

2.块内元素

(1)margin:0 auto;

(2)可以把元素的display设置为inline-block，父级元素的text-align设置为center;

css3水平居中

使用flex布局，待处理的块状元素的父元素添加属性display:flex及justify-content:center

css2垂直居中

1.单行的行内元素

父级元素的

.parent {
    background: #222;
    height: 200px;
}

a {
    line-height:200px; 
    color: #FFF;
}

解析：如有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。
显然，每个字的大小只有20px，那怎么办呢？于是呢，浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。
这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。
这样的话，如果你的DIV是50px，那么巧了，正好这行文字也就相对于DIV居中了。
所以，这样一来呢，就有了“把line-height设置为容器div的高度就能使文字垂直居中”。

2.多行的行内元素

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 以下属性垂直居中 */
    display: table-cell;
    vertical-align:middle;
}

而vertical-align只适用于inline / table-cell元素。

3.已知高度的块状元素

.item{
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    position: absolute;
    padding:0;
}

css2水平垂直居中

1.已知高度

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

2.已知高度，可以自动适应

.item{
    position: absolute;
    margin: auto;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

把元素充满了容器，同时自身指定了高度，总宽度=width +margin-left+margin-right,当margin设置为auto的时候，左右边距会平分，元素自然就居中了，和上面的line-height可以居中一样道理。

css3水平垂直居中

1.使用flex布局，待处理的块状元素的父元素添加属性

    display: flex;
    justify-content:center; /*水平居中×/
    align-items: center;  /*垂直居中*/

2.未知高度时

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}