css各种水平垂直居中操作汇总

各种居中操作

虽然很多博文都写过这方面的问题,但是每次碰到都会取查查看,而且对于解释有部分不够详细,这里自己总结一下.

水平居中

方法一:text-align:center

这种方法只针对子元素是行内元素或行内块级元素的情况

//css .big { background-color: deepskyblue; text-align: center; } .small { background-color: red; display: inline-block; margin: 0 auto; } //html

方法二:margin: 0 auto

这种方法主要是利用剩余空间

有几种情况无法居中:

绝对定位子元素是行内元素或者行内块级元素没声明DOCTYPE文档类型

注意:有时候对于不能使用行内元素,又希望子元素能按照内容大小控制宽度是,可以用display:table,

也可以用css3属性width:'fit-content’注意兼容 使用了该属性后无论是否脱离标准流 都可以用 margin:0 auto----非常bug了!!!

//table用法 //css .big { background-color: deepskyblue; width: 500px; } .small { display: table; background-color: red; margin: 0 auto; height: 100px; } //html <div class="big"> <div class="small">子元素</div> </div> //width:fit-content 用法 .big { background-color: deepskyblue; width: 500px; } .small { width: fit-content; width: -moz-fit-content; background-color: red; margin: 0 auto; height: 100px; } <div class="big"> <div class="small">子元素</div> </div>

方法三:绝对定位

左右设为0 配合margin:0 auto

注意:子元素必须是固定宽度,否则直接占满父元素

//css .big { background-color: deepskyblue; position: relative; width: 500px; height: 200px; } .small { background-color: red; height: 100px; width: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

方法四:css3的transform: translateX(-50%)横坐标变形方法

该方法要求子元素的宽度必须

.big { background-color: deepskyblue; position: relative; width: 500px; height: 100px; } .small { background-color: red; height: 100px; width: 200px; position: absolute; left: 50%; transform: translateX(-50%); } //html <div class="big"> <div class="small">子元素</div> </div>

方法五:margin-left:-XXpx

子元素宽度固定已知的情况

.big { background-color: deepskyblue; position: relative; width: 500px; height: 100px; } .small { background-color: red; height: 100px; width: 200px; position: absolute; left: 50%; margin-left: -100px; } //html <div class="big"> <div class="small">子元素</div> </div>

方法六:flex水平居中

flex居中非常方便,只要在父元素上设置在主轴的中心对齐

.big { background-color: deepskyblue; width: 500px; height: 100px; display: flex; justify-content: center; } .small { background-color: red; height: 100px; width: 200px; } //html <div class="big"> <div class="small">子元素</div> </div>

垂直居中

方法一:line-heigh:XXpx

适合单行文本

方法二:行内块级元素或行内元素都可利用vertical-align:center

vertical-align 是设置当前项目与当前行的基线的对齐方式,当前行内有一个高度为父类元素100%的元素时,两个元素同时设置垂直居中对齐,则产生垂直居中效果 这里我用的是给父元素添加伪类的方式实现

.big { background-color: deepskyblue; width: 200px; height: 100px; } .big::after{ content:''; height:100%; display: inline-block; vertical-align: middle; } .small { background-color: red; display: inline; vertical-align: middle; } //html <div class="big"> <span class="small">子元素</span> </div>

方法三:利用display:table-cell;vertical-align:middle;

table-cell的元素通过vertical-align可以垂直居中 ,td/th标签天生就有这样的效果

方法四:利用display: flex; align-items: center;

flex方法总是最简便的 直接设置在父元素上就可实现

方法五 css3transform: translateY(-50%);

同上面水平居中方法四

方法六 绝对定位 配合margin:auto 0

.small{ position:absolute; top:0; bottom:0; height:固定; margin:auto 0; }

同上面水平居中方法三

方法七 固定已知高度 用margin-top:-XXpx

.son{ position:absolute; top:50%; height:固定; margin-top:-0.5 * 自身高度; }

同上面水平居中方法五

暂时想到这些 如果有补充,可以指出来,谢谢