設定兩個盒子,父盒子裡面巢狀乙個子盒子,父盒子.father寬高500px,背景顏色為藍色,子盒子寬高300px,背景顏色為綠色,**和效果如圖所示:
html結構:
css樣式:
初始效果:
下面給div盒子設定樣式,實現居中效果
方法一:給子盒子.son新增margin:0 auto;
水平居中效果:
方法二:子絕父相定位居中,top 0;bottom 0; left 0;right 0;margin:auto;
css樣式:父盒子相對定位,子盒子絕對定位,子盒子依次設定top 0;bottom 0; left 0;right 0;margin:auto屬性,實現居中效果.
效果:
方法三:子絕父相定位百分比居中,top50%;margin-top:-150px;left50%;margin-left:-150px
1、父盒子相對定位position：relative,子盒子絕對定位；position：absolute.
2、子盒子設定top50%,讓盒子位於父盒子高度的50%.
3、子盒子設定margin-top:-150px，讓盒子向上行走自身高度的一半，至此實現子盒子垂直居中.
4、子盒子設定left50%,讓盒子位於父盒子寬度的50%.
5、子盒子設定margin-left:-150px，讓盒子向上行走自身寬度的一半，實現子盒子水平居中.
效果:
方法四:tansform
子絕父相:子盒子position:absolute,父盒子position:relative;
子盒子1.top:50%;
效果:
方法五:父盒子flex彈性布局
父盒子設定:
1.display:flex;
2.justify-content:center;
3.items-align:center;
效果:
總結及補充:
1.第一種方法是塊級元素水平居中,後四種方法是使塊級盒子水平垂直居中;
2.和等行內元素水平居中,給父元素設定text-align:center屬性;
3.文字垂直居中使用line-height:盒子的高度+px;
4.文字精準對齊使用line-height:1;實現去掉文字自帶的頂端和底部的空白部分;
5.行內塊元素、
、、垂直居中使用vertical-align:top/middle/bottom.
css居中方法合集
1.使用絕對定位和負外邊距對塊級元素進行垂直居中 html 我是測試div css 複製 box child 複製 執行結果如下 這個方法相容性不錯，但是有乙個小缺點 必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。2.使用絕對定位和transform html 我是一串很長很長很長很長...
盒子居中方法
css實現盒子模型水平居中 垂直居中 水平垂直居中的多種方法 水平居中效果圖 水平居中 全域性樣式 parent child 第一種 margin width 這種方法適用於已經知道width的盒子，實現起來比較簡單 child 第二種 text align inline block 這種方法適用於...
css不定寬塊級元素居中方法一
上一節介紹了定寬塊級元素居中，只需要設定margin 0px auto 即可 那這一節向大家介紹不定寬塊級元素居中的第一種方法,新增table標籤。html關鍵 不定寬塊級元素居中的第一種方法，加入table標籤 第一步 為需要居中的元素新增table標籤，包含tbody，tr，td html關鍵 ...