CSS居中

CSS 居中大全

<center>

text-align:center

在父容器里水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

line-height

与 height 联手，垂直居中文字

margin:auto

示例：

< style >    #ex2_container { width:200px; background-color:yellow; }    #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; } </ style > < div  id="ex2_container">< div  id="ex2_content">Hello World</ div ></ div >

hacks, hacks（小技巧）

有许多 hacks ，负 margin，影子元素 ::before 等。如果你的内容不是固定大小的话，它们大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

参考文章：居中百分比宽高的元素

示例：

< style >    #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }    #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; } </ style > < div  id="ex3_container">< div  id="ex3_content">Hello World</ div ></ div >

这个技巧相当嚣张，同样适用于没固定大小的内容，min-width，max-height，overflow:scroll 等。

绝对定位居中

父容器元素：position: relative

.Absolute-Center {    width : 50% ;    height : 50% ;    overflow : auto ;    margin : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

视口居中

内容元素：position: fixed，z-index: 999，记住父容器元素 position: relative

.Absolute-Center.is-Fixed {    width : 50% ;    height : 50% ;    overflow : auto ;    margin : auto ;    position : fixed ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ;    z-index : 999 ; }

模态窗口实例

响应式

百分比宽高，最大、最小宽度均可以，加 padding 也可以

.Absolute-Center.is-Responsive {    width : 60% ;    height : 60% ;    min-width : 400px ;    max-width : 500px ;    padding : 40px ;    overflow : auto ;    margin : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

偏移

只要 margin: auto; 在，内容块将垂直居中，top, left, bottom, right 可以设置偏移。

.Absolute-Center.is-Right {    width : 50% ;    height : 50% ;    margin : auto ;    overflow : auto ;    position : absolute ;    top : 0 ; left : auto ; bottom : 0 ; right : 20px ;    text-align : right ; }

溢出

居中内容比父容器高时，防止溢出，加 overflow: auto （没有任何 padding 时，也可以加 max-height: 100%;）。

.Absolute-Center.is-Overflow {    width : 50% ;    height : 300px ;    max-height : 100% ;    margin : auto ;    overflow : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

调整尺寸

resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸，确定加了 overflow: auto 。

.Absolute-Center.is-Resizable {    min-width : 20% ;    max-width : 80% ;    min-height : 20% ;    max-height : 80% ;    resize: both ;    overflow : auto ;    margin : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

图像

图像同样适用，设置 height: auto;

.Absolute-Center.is-Image {    width : 50% ;    height : auto ;    margin : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

可变高度

高度必须定义，但可以是百分比或 max-height。不想定义高度的话，用 display: table （需要考虑 Table-Cell 兼容性）。

.Absolute-Center.is-Variable {    display : table;    width : 50% ;    overflow : auto ;    margin : auto ;    position : absolute ;    top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; }

负 margin

确切知道宽高，负 margin 是宽和高的一半。

.is-Negative {          width : 300px ;          height : 200px ;          padding : 20px ;          position : absolute ;          top : 50% ; left : 50% ;          margin-left : -170px ; /* (width + padding)/2 */          margin-top : -120px ; /* (height + padding)/2 */ }

Table-Cell

参考文章：Flexible height vertical centering with CSS, beyond IE7

结构：

< div  class="Pos-Container is-Table">    < div  class="Table-Cell">      < div  class="Center-Block">      <!-- CONTENT -->      </ div >    </ div > </ div >

样式：

.Pos-Container.is-Table { display : table; } .is-Table .Table-Cell {    display : table-cell ;    vertical-align : middle ; } .is-Table .Center-Block {    width : 50% ;    margin : 0  auto ; }

FlexBox

参考文章：Designing CSS Layouts With Flexbox Is As Easy As Pie

.Pos-Container.is-Flexbox {    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 ; }