在css表格怎么居中对齐,css居中和对齐方法集锦

position + 负margin方法

该方法兼容 IE6 - IE7，但是要已知元素宽高，不支持百分比尺寸和 min-/max- 属性。

.div5{

position:relative;

height:50%;

width:50%;

border:4px solid #d8d8d8;

}

.span5{

width:50px;

height:50px;

border:4px solid #d8d8d8;

position:absolute;

top:50%;

left:50%;

margin-top:-25px;

margin-left:-25px;

}

position+ transform方法

这种方法原理和负边距方法一样，不过不用确定居中元素的宽高，但也有一些坑， 可能干扰其他 transform 效果，如有其他transform需要合写，不利于解耦。

其次， 使用transform可能导致元素内字体出现模糊，主要是因为使用了transform 3D变换,3D变换会开启GPU加速，GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容，图像清晰度不能保证，元素显示清晰度自然就下降了。(后来用了别的居中方法。。)

.div3{

position:relative;

height:50%;

width:50%;

border:4px solid #d8d8d8;

}

.span3{

width:50px;

height:50px;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

/*

transform:translateY(-50%);

transform:translateX(-50%);

*/

border:4px solid #d8d8d8;

}

绝对居中定位方法

元素的宽高支持百分比 % 属性值和 min-/max- 属性

.div6{

position:relative;

height:100%;

width:100%;

border:4px solid #d8d8d8;

}

.span6{

width:50%;

height:50%;

border:4px solid #d8d8d8;

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin: auto auto;

}

flexbox 布局

子元素为浮动，绝对定位，内联元素，都可以实现居中，但要ie11+才支持，可以用babel来polyfill

.div4{

display:flex;

height:50%;

width:50%;

border:4px solid #d8d8d8;

align-items:center;

justify-content:center;

}

.span4{

width:50px;

height:50px;

border:4px solid #d8d8d8;

}

box布局

.div8{

width:50%;

height:50%;

display:-webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

border:4px solid #d8d8d8;

}

.span8{

width:50px;

height:50px;

border:4px solid #d8d8d8;

}

:before伪元素方法

该方法是利用vertical-align的基线原理，假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部(基线)就会对齐a的中间位置， 如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了

.div9{

/* position:fixed;

display:block;

top:0;

right:0;

bottom:0;

left:0; */

width:50%;

height:50%;

text-align:center;

border:4px solid #d8d8d8;

/*background:rgba(0,0,0,.5);*/

}

.div9:before{

content:'';

display:inline-block;

vertical-align:middle;

height:100%;

}

.div9 .span9{

display:inline-block;

vertical-align:middle;

width:50px;

height:50px;

line-height:50px;

border:4px solid #d8d8d8;

}

table-cell + vertical-align居中

这个已经在多行文字例子做了介绍

附录

注1：

CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。常见用法:

...

注2：若要兼容ie6+的浏览器，可能需要css hack

div#wrap {

display:table;

border:4px solid #d8d8d8;

width:500px;

height:400px;

_position:relative;

overflow:hidden;

text-align:center;

}

div#subwrap {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

}

div#content {

_position:relative;

_top:-50%;

}