CSS 水平垂直居中

時間 2019-11-08

標籤 css 水平垂直居中欄目 CSS 简体版

原文原文鏈接

積少成多，聚水成涓！css

line-height

父元素高度肯定的單行文本設置 height=line-heightcss3

body {
        background: black;
    }
    
    .c2 {
        height: 80px;
        line-height: 80px;
        width: 80px;
        text-align: center;
        background: red;
    }
   <body>

<div class="block">
    123123
</div>
</body>

只是單行文本水平垂直居中，塊級元素並無web

position:absolute 實現水平垂直居中方法一

使用position:absolute，設置 left、top、margin-left、margin-topspa

.c1 {
        height: 300px;
        width: 300px;
        background: black;
        position: relative;
    }
    
    .c2 {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }
     <div class="c1">
        <div class="c2">
        </div>
    </div>

特色：兼容性好，不過需固定寬高
注意：若是不設置c1 position爲relative,則c2將基於根元素定位居中3d

position: absolute 實現水平垂直居中方法二

position:absolute,同時設置top/bottom/right/leftcode

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }

特色：可不用設置高寬，且兼容性好orm

position: fixed 可實現水平垂直居中方法一

使用position:fixed,一樣設置left、top、margin-left、margin-top的屬性blog

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }

  <body>

<div class="block">
    </div>
</body>

特色：position:fixed; IE 不支持,且需固定寬高ip

position: fixed 實現水平垂直居中方法二

設置position:fixed ，同時設置left/right/top/bottom爲0，margin:autoit

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }
    <body>

<div class="block">
    </div>
</body>

特色： position:fixed IE 不支持，不過不需固定寬高

display: table-cell

display:table-cell屬性使內容垂直居中

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background: red;
    }
<body>
<div class="block">
    123123
  </div>
</body>

特色：使內容居中，塊級元素不能居中

CSS3 display: -webkit-box

使用css3的display:-webkit-box屬性，再設置-webkit-box-pack:center/-webkit-box-align:center

body {
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        color: yellow;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: red;
    }
    <body>
       <div class="block">
           <span>123123</span>
      </div>
 </body>

特色：無需定寬高，行內和塊級元素均可水平垂直居中！但CSS3 IE 兼容性要考慮

CSS3 transform:translate(x,y)

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background: red;
    }
    <body>
       <div class="block">
         <span>123123</span>
       </div>
    </body>

特色：無需固定寬高但只能使塊級元素水平垂直居中！但CSS3 在 IE 兼容性須要考慮

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。