在css表格怎么居中对齐,css居中和对齐方法集锦
在css表格怎么居中对齐,css居中和对齐方法集锦
文本内容居中
单行文字 ： line-height + text-align:center or margin:0 auto
.div1 {
width:500px;
height:25px;
border:5px solid #d8d8d8;
text-align:center; /*子元素水平居中*/
line-height:25px; /*设置line-height,和高相等，即可垂直居中*/
overflow:hidden; /*后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。*/
}
.span1{
/*
width:100px;
display: block;
margin:0 auto;
*/
/*
这几个属性组合使用可以达到水平居中的效果，但要使margin:0 auto生效要满足以下条件
块级元素(display:block or display:table)
非浮动元素
非固定或绝对定位元素
宽度不能是auto
*/
}
单行文字已知宽高居中；
多行文字:display:table + display:table-cell + vertical-align:middle
IE 6 不能正确地理解display:table和display:table-cell，因此这种方法在IE6及以下的版本中是无效的。
处理多行文字的诀窍是用标签包起来当做一个元素(如span)来做水平垂直居中处理,这样水平垂直居中的方法都可以应用在这里。
.div2{
display:table-cell;
width:500px;
height:auto;
padding:0 0.1em;
border:4px solid #d8d8d8;
color:#069;
vertical-align:middle; /*CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。*/
}
.span2{
display:inline-block;
width:100%;
height:50%;
font-size:1em;
overflow-y:auto;
}
.div2-1{
display:table;
width:500px;
height:500px;
padding:0 0.1em;
border:4px solid #d8d8d8;
color:#069;
}
.span2-1{
display:table-cell;
font-size:1em;
vertical-align:middle;
}
2；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；
2-1；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；
其实文字居中最简单的方法就是设定Padding，使上下或左右的padding值相同即可。这是一种“看起来”的垂直居中方式，它使文字完全填充
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 top margin 负边距定位
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;
}
transform
绝对居中定位方法
元素的宽高支持百分比 % 属性值和 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;
}
position top bottom margin 绝对居中定位
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;
}
flex
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;
}
display:-webkit-box
: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;
}
:before
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%;
}
组和两种居中方案 css hack