CSS--居中方式總結

時間 2019-11-08

標籤 css 居中方式總結欄目 CSS 简体版

原文原文鏈接

1、水平居中方法

1.行內元素、字體的水平居中

1.對於行內元素（display值爲inline或inline-block均可以）或者字體：父元素添加css規則：text-align：center;css

<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實現水平居中html

將margin-left 和 margin-right 設置爲auto，塊元素將會自動匹配適應，實現水平居中web

<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的佈局方式來實現。flex

塊元素設置了inline-block後，擁有行內元素並排特色，只要父元素設置text-align便可使其水平居中。flexbox

<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>

2、垂直居中

1.行內元素或者文字（單行狀況）

1.能夠直接使用line-height屬性來設置: 將line-height設置成和height同樣便可spa

<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）經過增長內邊距來實現垂直的居中code

<style>
.ctext{
        /*關鍵*/
        padding-top:30px;
        padding-bottom:30px;
        border:1px solid red;
    }
</style>
<body>
 <div class="ctext">確認過眼神，我趕上對的人</div>
</body>

2.行內元素或者文字（多行狀況）

1.照樣可使用padding（top 和 bottom）orm

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>

3、水平且垂直居中

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>