CSS--居中方式总结

2018-02-27 09:05:19来源:cnblogs.com作者:渊源远愿人点击

分享

一、水平居中方法

1.行内元素、字体的水平居中

1.对于行内元素(display值为inline或inline-block都可以)或者字体:父元素添加css规则:text-align:center;

<style>p{    /*关键*/    text-align:center;}ul{    /*关键*/        text-align:center:}/*这里li设置inline-block*/.item{    /*关键*/    display:inline-block;}</style><!--字体--><p>I am ry</p><!--行内元素--><ul>    <li class="item">1</li>    <li class="item">2</li>    <li class="item">3</li>    <li class="item">4</li></ul>    

2.块元素的水平居中

1.使用margin实现水平居中

将margin-left 和 margin-right 设置为auto,块元素将会自动匹配适应,实现水平居中

<style>*{    margin:0;    padding:0;}.box1{    height:300px;    background:blue;}.item1{    /*关键,margin-left,margin-right设置为auto*/    margin: 0 auto;    width: 100px;    height: 100px;    background:red;}</style><body>   <div class="box1">       <div class="item1"></div>   </div></body>

2.使用position+margin-left实现水平居中

定位后,设置left先整体偏移父容器的一半,再使用负margin-left自己一半的宽度,从而子元素中心对准父元素中心。

<style>.box2{    position:relative;    height:300px;    background:blue;}.item2{    /*关键 相对定位*/    position: relative;    /*关键*/    left: 50%;    /*关键*/    margin-left:-50px;    width:100px;    height:100px;    background:red;}</style><body>  <div class="box2">       <div class="item2"></div>   </div></body>

3.如果是多个块元素在同一水平线居中排列,则将其display设置成inline-block,还有一种是使用flexbox的布局方式来实现。

块元素设置了inline-block后,拥有行内元素并排特点,只要父元素设置text-align即可使其水平居中。

<style>.box3{    /* 关键,对于行内元素水平居中 */    text-align: center;}.item3{    /* 关键,将块元素设置成行内块接元素 */    display:inline-block;    width:100px;    height: 100px;    background:red;}</style><body><div class="box3">       <div class="item3"></div>       <div class="item3"></div>       <div class="item3"></div>       <div class="item3"></div>   </div></body>

二、垂直居中

1.行内元素或者文字(单行情况)

1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可

<style>    .text{        height:100px;        line-height:100px;        border:1px solid red;    }</style><body>    <div class="text">        we dont talk anymore    </div></body>

2.使用padding(top,bottom)通过增加内边距来实现垂直的居中

<style>.ctext{        /*关键*/        padding-top:30px;        padding-bottom:30px;        border:1px solid red;    }</style><body> <div class="ctext">确认过眼神,我遇上对的人</div></body>

2.行内元素或者文字(多行情况)

1.照样可以使用padding(top 和 bottom)

2.对父元素设置display:table-cell 和 vertical-align:middle

<style>    .box{        /* 将其变成单元格的形式 */        display: table-cell;        /* width:100px; */        height:300px;        border:1px solid red;        /* 设置内联元素的垂直对齐的方式 */        vertical-align: middle;    }</style><body>    <div class="box">        <span>how to love</span><br>        <span>I knoe I need somebody</span><br>        <span>I know I need somebody</span><br>        <span>pary for me</span>    </div></body>

3.块元素垂直居中

1.确定宽高的情况

使用position 和 margin-top配合

<style>    *{        margin:0;        padding:0;    }    /* 父元素 */    .parent{        position:relative;        height:400px;        border: 1px solid blue;    }    /* 子元素 */    .child{        /* position  */        position: relative;        /* 距离顶部50% */        top:50%;        /* 再用margin-top     向上调子容器一半高度,则刚好子元素中心对准父元素中心 */        margin-top:-100px;        height:200px;        border:1px solid red;    }</style><body>    <div class="parent">        parent        <div class="child">            child        </div>    </div></body>

2.对于未知宽高的

使用transform 的 translateY(-50%) 向上平移自身一半

<style>    .parent2{        position: relative;        background:blue;        height:400px;    }    .child2{        position: relative;        top:50%;        transform: translateY(-50%);        background: red;    }</style><div class="parent2">        parent2    <div class="child2">child2</div></div>

3.使用flex布局

<style>  .parent3{        /*关键flex*/        display:flex;        display: -webkit-flex;        /* 对齐排列居中 */        justify-content:center;        /* 排列方向垂直 */        flex-direction:column;        height:400px;        background:yellow;    }    .child3{        height:100px;       }</style><body> <!-- flexbox -->    <div class="parent3">        <div class="child3"></div>    </div></body>

三、水平且垂直居中

1.position 和 margin 配合

<style>    *{        margin: 0 ;        padding: 0 ;    }    .box1{        position:relative;        height:400px;        background:blue;    }    .item1{        /*关键*/        position: absolute;        top: 50%;        left: 50%;        margin-top:-50px;        margin-left:-50px;        width:100px;        height:100px;        background: red;    }</style><body>    <div class="box1">        <div class="item1"></div>    </div></body>

2.使用flex布局

同时设置两条居中属性 justify-content 和 align-items

<style>   .box2{        display: flex;        /*关键*/        justify-content: center;        /*关键*/        align-items: center;        height:300px;        background:yellow;    }    .item2{        width:50px;        height:50px;        background:red;    }</style><body>    <div class="box1">        <div class="item1"></div>    </div>    <div class="box2">        <div class="item2"></div>    </div></body>

本篇是个人笔记,可经常看看。向前走,也别忘记要多回顾

确认过眼神,我遇上对的人

Ry(元)

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台