CSS 水平居中

王为仁 2019-06-27

零散的知识不整理进入自己的知识框架太容易忘,对于CSS脑子里零零散散的!整理自勉!

水平居中

块级元素水平居中

margin:auto

此居中的方法前提为居中块级元素宽度必须固定才可设置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>

CSS 水平居中

可见块2的margin-left,margin-right设置为auto后实现水平居中,但是margin-top,margin-bottom设置为auto确并不能垂直居中!
特点:浏览器兼容性强,但扩展性差,无法自适应未知项情况

text-align:center

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>

CSS 水平居中

特点:扩展性强,但需要额外处理inline-block的浏览器兼容性
注:该种方法可以让display为inline/inline-block/inline-table/inline/flex值的子元素居中

position:absolute

通过设置子元素为绝对定位元素还有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>

CSS 水平居中

特点: 必须知道子元素的宽度才能设置左边补白的负值
注:网上有说法可以通过和float来实现不定宽度块级元素居中(还未深究)

CSS3 flex实现水平居中方法

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>

CSS 水平居中

特点:实现便捷,扩展性强但兼容需要考虑

CSS3 width:fit-content

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>

CSS 水平居中

特点:扩展性强,但兼容性差;

float

浮动居中有待好好研究!
特点:兼容性强,扩展性强!但实现原理较复杂

相关推荐

覆雪蓝枫 / 0评论 2019-06-27