css水平垂直居中

SoapEye 發布于2019-04-23 11:40 / 2956人閱讀

摘要：上面達不到需求，可以考慮使用定位，移動端能使用就使用垂直居中，單行文本，使用等于父元素高度，如果不行，就可以設置父元素，能解決一大部分問題，如果還不行就考慮定位配合，使用。

1.CSS的水平居中，

　　1.1 父元素是塊狀元素，子元素為行內元素的居中，直接設置text-aglin: center ,常見的文本，span 標簽，button,img等行內元素都是可以使其水平居中的

.box{
            text-align: center;
        }

<div class="box">
        <span>11111span>
        <button>123button>
    div>

　　1.2 父元素為塊狀元素，子元素也為塊狀元素

　　　　1.2.1 子元素寬度已知，則可以設置子元素 margin 0 auto,就可以使子元素相對于父元素水平居中

<style>
        .box{
            background-color: pink;
        }
        .con-box{
            width: 300px;
            margin: 0 auto;
            height: 30px;
            background-color: aqua;
        }
    style>

<div class="box">
        <div class="con-box">

        div>
    div>

　　1.3? 父元素為塊狀元素，子元素為塊狀元素寬度不定，直接設置子元素display:inline,　　然后設置父元素的text-aglin:center

<style>
        .box{
            background-color: pink;
            text-align: center
        }
        .con-box{
            display: inline;
        }
    style>
<div class="box">
        <div class="con-box">
            111111
        div>
    div>

　　　　注：使用彈性布局，使用定位，都是可以使子元素相對于父元素水平居中的

2.垂直居中

　　2.1 父元素為塊狀元素，子元素為行內元素，如單行文本，直接設置父元素的line-height 等于父元素的高度，

<style>
        .box{
            background-color: pink;
            height: 50px;
            line-height: 50px;
        }
        .con span{
            line-height: 50px;
        }
    style>

<div class="box">
        <span> 111111span>
    div>

　　2.2 父元素為塊狀元素，子元素為多行文本，則設置父元素的line-height 等于父元素高度除于行數，

.box{
            background-color: pink;
            height: 50px;
            line-height: 25px;
        }
        .con span{
            line-height: 50px;
        }

<div class="box">
        <span> 111111span><br>
        <span> 111111span><br>
    div>

　　2.3 父元素為塊狀元素，子元素也為塊狀元素，

　　　　2.3.1 子元素高度未知，改變父元素的display 屬性設置為 table-cell,然后設置vertical-align:middle;

<style>
        .box{
            background-color: pink;
            height: 50px;
            display: table-cell;
            vertical-align:middle;
        }
        .box .con-box{
            background-color: aqua;
        }
    style>

<div class="box">
        <div class="con-box"> 
            1111
        div>
    div>

　　　　2.3.2 子元素高度已知，則設置margin-top，元素高度減去子元素高度除于2; 記住一定要設置父元素的overflow: hidden;?

　　　　　　（相鄰塊狀元素 margin會共享，取最大值，不設置overflow: hidden，子元素的margin-top:10px 會跑到父元素上）

<style>
        .box{
            background-color: pink;
            height: 50px;
            overflow: hidden;           
     }
        .box .con-box{
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            background-color: aqua;
        }
    style>

<div class="box">
        <div class="con-box"> 
            1111
        div>
    div>

　　　　2.3.3 子元素為圖片，直接可以設置父元素display: table-cell;?vertical-align: middle;

<style>
        .box{
            background-color: pink;
            height: 450px;
            display: table-cell; 
            vertical-align: middle;         
     }
style>

　　2.3.4 子元素為多個，比如圖片，外加別的行內元素，使用2.3.3，文本可以不用改變，必讀給圖片加?vertical-align: middle;

    <style>
        .box{
            background-color: pink;
            height: 450px;
            display: table-cell; 
            vertical-align: middle;         
     }
     img{
         vertical-align: middle
     }
    style>

<div class="box">
        <img src="../xunguang-4.jpg" alt="">
        <span>12123123span>
        1111111
    div>

3.CSS 水平垂直居中上面兩兩組和使可以實現的，我們主要看一下定位和flex 實現水平垂直居中

　　3.1子元素高度未知，高度已知的塊狀元素水平垂直居中，（寬度未知，塊狀元素肯定使占滿整行的，就不存在水平居中了）

　　　　3.1.1使用定位配置，配合margin 0 auto ,top 50%,寬度未知，只能使用transform:translateY(-50%);

  <style>
        .box{
            background-color: pink;
            height: 450px;  
            position: relative; // relative 默認沾滿整行，absolute話，未設置寬度則由子元素撐開    
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            margin: 0 auto;
            background-color: aqua;
            top:50%;
            transform: translateY(-50%);
        }

    style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
    div>

　　　　3.1.2，使用定位，子元素 left 0 right 0 top 0 bottom 0 margin auto （一定要注意父子元素的定位屬性）

<style>
        .box{
            background-color: pink;
            height: 450px;  
            position: relative; /* 父元素一定為relative */   
            overflow: hidden; 
        }
        .box .con-box{
            position: absolute; /*  *子元素一定 為absolete*/
            width: 300px;
            background-color: aqua;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
    div>

　　3.2 ，子元素寬度，高度都已知，3.1 上的兩種方法都適用寬度高度已經的子元素水平垂直居中

　　　　3.2.1 margin-top: -width/2 具體的值，?transform: translateY(-50%) 這個有兼容性問題，需要ie9以上，具體寬度值則無兼容性問題，

<style>
                .box{
            background-color: pink;
            height: 450px;  
            position: relative; 
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 auto;
            background-color: aqua;
            top:50%;
            margin-top: -200px
        }


    style>

<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
    div>

　　　　上面方法的變化版

<style>
                .box{
            background-color: pink;
            height: 450px;  
            position: relative; 
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: aqua;
            top:50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -150px;
        }


    style>

<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
    div>

4 flex 水平垂直居中

　　flex 主軸上居中，交叉軸上居中，flex 有很大的兼容性問題，一般用于移動端，很簡單

<style>
                .box{
            background-color: pink;
            height: 450px;  
            display: flex;
            justify-content: center;
            align-items: center
        }
        .box .con-box{
            width: 300px;
            height: 400px;
            background-color: aqua;
        }


    style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
    div>

?　　　　多個子元素也一樣實現

　　　　子元素可以多帶帶設置對其方式

<style>
                .box{
            background-color: pink;
            height: 450px;  
            display: flex;
            justify-content: center;
            align-items: center
        }
        .box .con-box{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }
        .box .con-box2{
            width: 200px;
            height: 400px;
            background-color: lightcyan;
        }
        .box .con-box3{
            width: 200px;
            height: 400px;
            background-color: gold;
            align-self: flex-end;
        }

    style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        div>
        <div class="con-box2">
            123123123123
            <br>
            1222222222
        div>
        <div class="con-box3">
            123123123123
            <br>
            1222222222
        div>
    div>

? ?總結?

　　　1.水平居中，能使用margin: 0 auto ,這最簡單的，不能的話就把子元素轉化成inline,然后使用text-aglin：center,無兼容性問題。

　　　　上面達不到需求，可以考慮使用定位，移動端能使用flex 就使用flex

　　? ?2. 垂直居中，單行文本，使用line-height 等于父元素高度，如果不行，就可以設置父元素display:table-cell，vertical-align: middle;

　　　　能解決一大部分問題，如果還不行就考慮定位配合margin-top:-width/2，使用margin。移動端能使用flex 就使用flex.

　　如果您還有更好的方法，歡迎給我留言，共同學習，共同進步。up

GPU云服務器云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/998.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0