1、水平居中
水平居中可分為行內元素水平居中和塊級元素水平居中
1.1 行內元素水平居中
這里行內元素是指文本text、圖像img、按鈕超鏈接等,只需給父元素設置text-align:center即可實現。
.center{ text-align:center; } <div class="center">水平居中</div>
1.2 塊級元素水平居中
-
定寬塊級元素水平居中
只需給需要居中的塊級元素加margin:0 auto即可,但這里需要注意的是,這里塊狀元素的寬度width值一定要有.center{
width:200px; margin:0 auto; } <div class="center">水平居中</div> -
不定寬塊級元素水平居中
不定寬,即塊級元素寬度不固定
方法1:設置table通過給要居中顯示的元素,設置display:table,然后設置margin:0 auto來實現
.center{ display:table; margin:0 auto; border:1px solid red; } <div class="center">水平居中</div>
方法2:設置inline-block(多個塊狀元素)
子元素設置inline-block,同時父元素設置text-align:center.center{ text-align:center; } .inlineblock-div{ display:inline-block; } <div class="center"> <div class="inlineblock-div">1</div> <div class="inlineblock-div">2</div> </div>
方法3:設置flex布局
只需把要處理的塊狀元素的父元素設置display:flex,justify-content:center;.center{ display:flex; justify-content:center; } <div class="center"> <div class="flex-div">1</div> <div class="flex-div">2</div> </div>
方法4:position + 負margin;
方法5:position + margin:auto;
方法6:position + transform;注:這里方法4、5、6同下面垂直居中一樣的道理,只不過需要把top/bottom改為left/right,在垂直居中部分會詳細講述。
2、垂直居中
2.1 單行文本垂直居中
- 設置paddingtop=paddingbottom;或
- 設置line-height=height;
2.2 多行文本垂直居中
通過設置父元素table,子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部
2.3 塊級元素垂直居中
方法1:flex布局
在需要垂直居中的父元素上,設置display:flex和align-items:center
要求:父元素必須顯示設置height值
顯示效果:
方法2:利用position和top和負margin(需知寬高)
1、設置元素為absolute/relative/fixed
2、margin=負一半
效果如下:
方法3:利用position和top/bottom和margin:auto(注意不是margin:0 auto)
1、position:absolute/relative/fixed
2、top/bottom:0
3、margin:auto
效果如下:
方法4:利用position和top和transform
transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
效果如下:
注:
- 上述的塊級垂直居中方法,稍加改動,即可成為塊級水平居中方法,如top/bottom換成left/right
- transform方法,可用於未知元素大小的居中
3、水平垂直居中
方法1:絕對定位+margin:auto
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
方法2:絕對定位+負margin
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
方法3:絕對定位+transform
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父級的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
方法4:flex布局
.box{ height:600px; display:flex; justify-content:center; //子元素水平居中 align-items:center; //子元素垂直居中 /* aa只要三句話就可以實現不定寬高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }
方法5:table-cell實現居中
.box{ display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple; }