水平居中：

<center> 不建议用了。

行内元素水平居中,父级text-align:center

定宽块级元素  margin: 20px auto;

不定宽块级元素 

1 加入 table 标签
2 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

垂直居中

1.height：30px;line-height:30px;

2.table  vertical-align：middle;

3.display:table-cell;/*IE8以上及Chrome、Firefox*/
   vertical-align:middle;/*IE8以上及Chrome、Firefox*/

4.font-size

5.

.parent {
    width: 200px;
    height: 200px;
    background-color: black;
}
.child {
    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color:red;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

参考 http://www.5icool.org/a/201309/a2516.html

       http://www.cnblogs.com/wishyouhappy/p/3681037.html?utm_source=tuicool&utm_medium=referral

您可能也喜欢：

css绘图

CSS3选择属性::selection

用css3给自己一个笑脸

css3 box-sizing属性

css3-照片墙效果

无觅

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《css水平居中和垂直居中》