html css 单元格 居中,html + css 居中方法大全

css居中

水平居中：

说到水平居中，最简单的方法就是margin：0 auto;

也就是将margin-left 和 margin-right属性设置为auto;

源码和效果如下图所示:

ps:不要想当然的以为简单地将margin值设置为auto，就可以将元素水平、垂直居中(不过在css3弹性布局中确实可以这样子做，这里暂不做过多讨论)；

文本的居中对齐方式：

ps:文本垂直对齐一般上设置line-height和height 相等的值就可以!

padding填充

利用padding和background-clip配合实现div的水平垂直居中：

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：

盒子模型

绝对定位居中

盒模型

盒模型

调整尺寸

resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸，确定加了 overflow: auto

盒模型

margin填充(主要给父元素设置overflow来触发父元素的BFC)

对应的盒模型

列表内容

absolute定位+margin填充

对应的盒模型

总结：*此方法就是利用定位，将子元素设置top和left 均为 50%,然后margin-top 和

margin-left设为负的本身盒子的高和宽的一半，即可实现水平垂直居中！*

transform居中

上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。

Document

float:left;

width:100%;

height:200px;

background-color:red;

}

.children{

float:left;

position:relative;

top:50%;

left:50%;

}

.children-inline{

position:relative;

left:-50%;

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

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

background-color:#ccc;

color:#fff;

}

我是水平垂直居中噢！

*首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。

再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform

translate3d(0, -50%, 0); 这个方法非常好用噢。*

flex居中

Document

width:100%;

height:200px;

}

.parent{

display:flex;

align-items:center;//垂直居中

justify-content:center;

width:100%;

height:100%;

background-color:red;

}

.children{

background-color:blue;

}

flex水平垂直居中的