旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css里高低居中怎么弄?【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:99


导读:css里高低居中也就是垂直居中,css中按元素能够分为三种垂直居中体式格局,分别是单行的行内元素,多行的行内元素以及块元素的垂直居中,下面将做细致引见。单行的行内元素...
css里高低居中也就是垂直居中,css中按元素能够分为三种垂直居中体式格局,分别是单行的行内元素,多行的行内元素以及块元素的垂直居中,下面将做细致引见。

单行的行内元素

只需要设置单行行内元素的"行高即是盒子的高"即可;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

结果:

多行的行内元素

运用给父元素设置display:table-cell;和vertical-align: middle;即可;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

<span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>

</div>

结果:

块级元素

计划一:运用定位

起首设置父元素为相对定位,再设置子元素为相对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

定高度:设置相对子元素的 margin-top: -元素高度的一半px; 或许设置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定高度:应用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

结果:

计划二:运用flexbox规划完成(高度定不定都能够)

运用flexbox规划,只需要给待处理的块状元素的父元素增加属性 display: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

结果:

相干教程:CSS视频教程

以上就是css里高低居中怎么弄?的细致内容,更多请关注ki4网别的相干文章!

标签:css上下居中垂直居中