css垂直水平居中小总结

水平居中 行内元素居中： 可以给它的父级元素指定：text-align：center，这样该子元素就会在水平方向上居中了。需要注意的是，会受该属性影响的只有inline／inline-block／inline-flex等拥有行内元素那样特性的元素。块级元素居中： 对于一个有固定宽度的块级元素，可以通过设置margin：0 auto；这样来实现,注意，这里的块级元素要有固定的宽度。使用定位来居中： 假如待定位的元素有固定的宽度，设置父元素的position：relative，然后要定位的元素position：absolute ，如下 <style> .wrapper{ position:relative; } .box{ position:absolute; width:100px; left:50%; margin-left:-50px; } </style> <div class="wrapper"> <div class="box"> </div> </div>

这里margin-left的值的绝对值大小等于宽度的一半。注意，元素的宽度是必须的。

这里还有一种其他方式：

<style> .wrapper{ position:relative; } .box{ position:absolute; width:100px; left:0; right:0; margin:0 auto; } </style> <div class="wrapper"> <div class="box"> </div> </div> 使用transform： 也是利用了定位，跟上述有点类似，不同的是元素可以不设置宽度 <style> .wrapper { position:relative; } .center { position:absolute; background-color: red; transform: translateX(-50%); color:#000; left:50%; } </style> <div class="wrapper"> <div class="center"> kasol </div> </div> 使用flex弹性布局： 给父元素设置display：flex，justify-content：center，这个是利用了弹性布局，justify-content指定了一个Item在主轴方向上的对齐方式. .wrapper{ display:flex; border:1px solid red; justify-content:center; } p{ border:1px solid #ccc; width:50px; }

2.垂直居中

单行文字垂直居中

把line-height设置成和父元素高度相同的值。

假如待定位的元素有固定的高度，如下：

<style> .wrapper{ border:1px solid red; height:300px; position:relative; } p{ border:1px solid #ccc; margin:0; height:100px; position:absolute; top:50%; margin-top:-50px; } </style> <div class="wrapper"> <p>123</p> </div>

其实和水平居中套路是差不多的。那么相似的也可以这样。

.wrapper{ border:1px solid red; height:300px; position:relative; } p{ border:1px solid #ccc; margin: auto 0; height:100px; position:absolute; top:0; bottom:0; }

也是利用了margin这个属性，当然也可以用transform：

.wrapper{ border:1px solid red; height:300px; position:relative; } p{ border:1px solid #ccc; height:100px; position:absolute; margin:0; transform:translateY(-50%); top:50%; }

也可以用弹性布局：

.wrapper{ display:flex; border:1px solid red; height:300px; align-items : center; } p{ border:1px solid #ccc; height:50px; }

垂直居中还可以利用table来

.wrapper{ display: table; border:1px solid red; height:500px; width:300px; } p{ display: table-cell; vertical-align:middle; }

主要是利用了table-cell可以设置vertical-align属性

想要垂直水平居中的话，把上面的结合起来分析就行了

总之针对不同的情况可以选择不同的方法，