王为仁 2019-06-27
零散的知识不整理进入自己的知识框架太容易忘,对于CSS脑子里零零散散的!整理自勉!
此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白
.block1{ height: 300px; width: 600px; background: black; } .block2{ height: 100px; width: 100px; margin: auto; background: red; } <div class="block1"> <div class="block2"></div> </div>
可见块2的margin-left,margin-right设置为auto后实现水平居中,但是margin-top,margin-bottom设置为auto确并不能垂直居中!
特点:浏览器兼容性强,但扩展性差,无法自适应未知项情况
text-align 属性规定元素中的文本的水平对齐方式!显然不是用来给块级元素水平居中的,不过可设置块级元素为行内块级元素时便可实现水平居中
.block1 { height: 300px; width: 600px; background: black; text-align: center; } .block2 { height: 100px; display: inline-block; background: red; } <div class="block1"> <div class="block2">11111111111</div> </div>
特点:扩展性强,但需要额外处理inline-block的浏览器兼容性
注:该种方法可以让display为inline
/inline-block
/inline-table
/inline
/flex
值的子元素居中
通过设置子元素为绝对定位元素还有left和margin-left的值可以达到居中效果
.block1 { height: 300px; width: 600px; position: relative; background: black; } .block2 { height: 100px; width: 100px; position: absolute; left: 50%; margin-left: -50px; background: red; } <div class="block1"> <div class="block2"></div> </div>
特点: 必须知道子元素的宽度才能设置左边补白的负值
注:网上有说法可以通过和float来实现不定宽度块级元素居中(还未深究)
Flex主要用来布局! Flex布局,可以简便、完整、响应式地实现各种页面布局。后面整理flex布局笔记!
.block1 { height: 300px; width: 600px; display: flex; justify-content: center; background: black; } .block2 { height: 100px; background: red; } <div class="block1"> <div class="block2">1123123</div> </div>
特点:实现便捷,扩展性强但兼容需要考虑
width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了
.block1 { height: 300px; width: 600px; background: black; } .block2 { height: 100px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; background: red; } <div class="block1"> <div class="block2">1123123</div> </div>
特点:扩展性强,但兼容性差;
浮动居中有待好好研究!
特点:兼容性强,扩展性强!但实现原理较复杂
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
CSS中居中的几种方式1.水平居中margin:0 auto;块级元素在块级元素中居中设置在子元素上,前提是不受float影响。给它的父元素设置text-aglin:center不会使它在父元素中居中