CSS 居中
居中通常分爲水平居中、垂直居中、文字居中css
對於CSS，若是實現一個元素水平居中，仍是比較容易實現的：html
- 行內元素：在父元素上設置text-align:center;
- 塊級元素：margin:auto。
可是，要實現元素垂直居中，仍是比較困難的，尤爲是元素大小固定時。web
不討論的方法：chrome
- 表格佈局，由於須要一些冗餘的HTML標籤
- inline-block，須要使用不少的hack
下面的示例用的HTML結構都是<body>元素中插入下面的標籤：瀏覽器
1 <div> 2 <h1>居中了麼？</h1> 3 <p>請居中！</p> 4 </div>
1 絕對定位解決方法
1.1 最先實現垂直居中的技術是元素須要一個固定的寬度和高度：
1 div{ 2 position:absolute; 3 top:50%; 4 left:50%; 5 margin-top:-3em; 6 margin-left:-9em; 7 width:18em; 8 height:6em; 9 }
從本質上講，將元素的左上角移到視窗中心點，而後使用負margin(使用margin-left和margin-top)，而margin的值是元素寬度和高度的一半，使元素中心點與視窗的中心點重合。佈局
1.2 若是使用calc()能夠減小兩個樣式：
1 div{ 2 position:absolute; 3 top : calc(50% - 3em); 4 left : calc(50% - 9em); 5 width: 18em; 6 height: 6em; 7 }
顯然，這種方法的最大問題，是元素須要一個固定的尺寸，而須要垂直居中元素的尺寸經常須要由它的內容來決定。若是有辦法使用百分比來控制元素的尺寸，咱們的問題就能夠解決了。不幸的是，大多數CSS屬性(包括margin)百分比的值是對於其父元素的寬度來決定的。flex
1.3 transform
在CSS中經常能夠看到不少解決方案是難以想象的。在這個例子中，可使用CSS3的transform。能夠在transform中的translate()使用百分比，讓元素元素移動是相對自身的寬度和高度，這種方案正式咱們須要的。flexbox
1 div{ 2 position:absolute; 3 top:50%; 4 left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
5 transform:translate(-50%, -50%); 6 }
使用絕對定位一般不是一個很好地選擇，由於它對總體的佈局影響至關大。spa
若是垂直居中元素的內容比視窗寬度更高的話，它的頂部會被裁剪掉，以下圖所示。但這個問題能夠解決掉，只不過須要使用一些hack手段。3d
在一些瀏覽器中，可能會致使元素出現略微的模糊，那是由於元素可能被放置在半個元素位置上。咱們能夠經過transform-style:preserve-3d來解決，儘管這是一個hack手段，不能保證它不會過期。
2 視窗單位
若是想避免使用絕對定位，仍然可使用translate()方法，其值恰好是原寬度和高度的一半。然而，咱們如何不使用top和left，將元素從top和left移動50%的偏移量呢？
2.1 margin屬性一個百分號
首先給margin屬性一個百分數，像這樣：
1 div{ 2 width:18em; 3 padding:1em 1.5em; 4 margin:50% auto 0; 5 transform:translateY(-50%); 6 }
但這種會產生奇怪的效果，並無真正的垂直居中，主要緣由margin的百分比計算是相對於父容器的width來計算的。
若是想讓元素在視窗中居中，仍是能夠的。
CSS Values and Units Level 3定義了一種新的單位，稱爲相對視窗(Viewport-relative)長度單位。
- vw是相對視窗的寬度。1vw至關於視窗寬度的1%，而不是100%；
- 若是視窗的寬度小於高度，1vmin等於1vm，反之，若是視窗寬度大於高度，1vmin等於1vh；
- 若是視窗寬度大於高度，1vmax等於1vw，反之，若是視窗寬度小於高度，1vmax等於1vh.
1 div{ 2 width:18em; 3 padding:1em 1.5em; 4 margin:50vh auto 0; 5 transform:translateY(-50%); 6 }
能夠實現很好的垂直居中效果。
這種方法只適合元素在視窗中垂直居中。
3 flexbox
這種解決方案無疑是最好的，由於它在現代瀏覽器中能夠獲得很好地支持。
3.1 flex
只須要兩個樣式，在須要垂直居中的父元素上設置display:flex;
這個示例<body>和垂直居中元素上設置margin:auto
body {
display: flex;
min-height: 100vh;
margin: 0;
}
div {
margin: auto;
}
元素不只實現水平居中，並且還會垂直居中，沒有設置寬度。
flexbox還有一個優勢，可讓匿名容器垂直居中。
3.2 align-items和justify-content
能夠經過align-items和justify-content屬性設置固定的尺寸的div容器裏面的文本
能夠在<body>和須要的居中的元素div使用相同的屬性，同時使用margin:auto做爲備用，易於優雅降級。
div {
display:flex;
align-items:center;
justify-content:center;
width:18em;
height:10em;
}
4 IE兼容問題
通常狀況下，須要將div居中顯示，使CSS樣式margin:0 auto;或margin:0 auto 1px;，但有時使用margin:0 auto;可以在ff和chrome中正常居中顯示，但對於IE6以前瀏覽器則不能實現水平居中
margin:0 auto
上面的margin：0 auto不能實現水平居中，怎麼解決呢？
解決IE的兼容的bug,搜索了下，有兩種解決方法
一、經過在body或父級元素設置text-align:center來實現居中
二、和方法一差很少，在居中的外層加一個div，並使其居中便可。
三、出現這個緣由，主要在於文檔的dtd聲明問題，DOCTYPE爲 xhtml 1.0 tranditional (html 4.01 下無效)。
修改DTD爲下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
另外還可使用<center></center>這個是HTML5
一、不能使用float(不管是使用float:left仍是float:right);
二、對body設置text-align:center;
三、對最外層設置margin:0 auto;兼容各大瀏覽器水平居中樣式
- 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 遍歷的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS之居中
- 2. CSS 居中
- 3. CSS居中
- 4. css居中，margin_and_position
- 5. css居中
- 6. CSS垂直居中，水平居中
- 7. CSS垂直居中和水平居中
- 8. 【CSS】水平居中和垂直居中
- 9. CSS：水平居中與垂直居中
- 10. CSS水平居中和垂直居中