CSS 居中

時間 2019-11-13

標籤 css 居中欄目 CSS 简体版

原文原文鏈接

1、水平或垂直居中

1. 單行內容垂直居中

/*height = line-height*/
.center{
    height: 4em;
    line-height: 4em;
    overflow: hidden;      /*保護佈局，非必須*/
}

支持：全部塊級、內聯元素、全部瀏覽器css

缺點：只能顯示一行html

2. div水平居中

<!--html代碼-->
<div class="center">div居中了</div>

body{ text-align:center} 
.center{ 
    margin:0 auto;   /*main*/
    width:400px; 
    height:100px; 
    border:1px solid #F00
}

3. float

給父元素設置float，而後父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來實現web

2、水平+垂直居中

1. 非固定高度居中

.middle{
  position:absolute;
  top:10px;
  bottom:10px;  
}

支持：全部塊級、內聯元素、全部瀏覽器
缺點：容器不能固定高度瀏覽器

2. 利用表格

.middle{
    display: table-cell;
    height: 300px;
    vertical-align: middle;
}

缺點：IE無效ide

3. margin負值

.middle {
        width: 400px;
        height: 200px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -200px; /*   width/2   */
        margin-top: -100px; /*   height/2   */
}

支持：ie各個版本佈局

缺點：非響應式，寬高固定，須要爲padding預留空間或用box-sizing:border-boxflex

4. 徹底居中

<!DOCTYPE html>
<html>
<head>
    <title>text-align</title>
    <style type="text/css" media="screen">
    body {
        text-align: center
    }
    .middle {
        background: red;
        bottom: 0;
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
    }
    </style>
</head>

<body>
    <div class="middle">center</div>
</body>

</html>

middle&center

5. fixed（可視區域內居中）

.middle {
  position: fixed;
  z-index: 999;  /*設置較大的z-index居於其餘元素上方   最好在外層容器設置position:relative */
}

6. transform

.middle { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

缺點：不支持IE8flexbox

7. inline-block

.middle{
    display: inline-block;
     vertical-align: middle;
　　　text-align: center;
}

8. Flex方法

<div class="container">
    <!--容器內的元素將會居中-->
    <img src="a.jpg">
</div>

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*考慮兼容性 */
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

1.設置container的display的類型爲flex，激活爲flexbox模式。spa

2.justify-content定義水平方向的元素位置code

3.align-items定義垂直方向的元素位置

支持：任意寬高

不支持IE8-9

3、圖片居中

1. align

<div align="center"><img src="a.jpg" /></div>

2. text-align

<div style="text-align:center"><img src="a.jpg" /></div>

4、對照表

所用樣式	支持的瀏覽器	是否響應式	內容溢出後的樣式	resize:both	高度可變	主要缺陷
Absolute	現代瀏覽器&IE8+	是	會致使容器溢出	是	是*	‘可變高度’的特性不能跨瀏覽器
負margin值	全部	否	帶滾動條	大小改變後再也不居中	否	不具備響應式特性，margin值必須通過手工計算
Transform	現代瀏覽器&IE9+	是	會致使容器溢出	是	是	妨礙渲染
Table-Cell	現代瀏覽器&IE8+	是	撐開容器	否	是	會加上多餘的標記
Inline-Block	現代瀏覽器&IE8+&IE7*	是	撐開容器	否	是	須要使用容器包裹和hack式的樣式
Flexbox	現代瀏覽器&IE10+	是	會致使容器溢出	是	是	須要使用容器包裹和廠商前綴（vendor prefix）

持續更新······

若有建議或其餘實現方法，歡迎留言交流~

1. CSS之居中
2. CSS 居中
3. CSS居中
4. css居中，margin_and_position
5. css居中
6. CSS垂直居中，水平居中
7. CSS垂直居中和水平居中
8. 【CSS】水平居中和垂直居中
9. CSS：水平居中與垂直居中
10. CSS水平居中和垂直居中
更多相關文章...
• CSS 指南 - 網站建設指南
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• Scala 中文亂碼解決
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

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