css怎麼水平居中?1. 最好不使用定位方式,因為它對整體的布局影響很大,現在小編就來說說關于css怎麼水平居中?下面内容希望能幫助到你,我們來一起看看吧!
1. 最好不使用定位方式,因為它對整體的布局影響很大。
一:元素水平居中
1. 定寬時,margin方式,必須滿足的條件
被居中的元素寬固定
元素是塊級元素或者設置為display:inline-block|block
元素的左右margin設為auto
2. 定寬時,定位方式,必須滿足的條件
元素寬固定
元素絕對定位,left為50%
元素的margin-left為元素寬的一半(負值)
适用于垂直居中,将margin-top設為高的一半
水平垂直居中時,将這兩個組合起來即可
3. 不定寬時,定位方式,必須滿足的條件
用css3的transform:translate,讓它自己向上向左移動自身寬高的一半
IE9
4. 文字水平居中
單行文字用text-align:center
多行文字參照塊居中
5. flex布局
justify-content實現主軸居中
aign-items實現交叉軸居中
結合使用實現水平垂直居中
舉個栗子如果塊級元素中的行内元素inline | 行内塊元素inline-block | inline-table | inline-flex 居中或者文字居中,用text-align:center
transform:translate(0,-50%)即可
2. 單行文本垂直
将文本的line-height設置父元素的高度
3. 在不考慮浏覽器兼容性問題時,用flex布局是最好的
容器flex布局
項目的margin為auto
舉個栗子單行文本垂直居中
<div class="center"><span>inline hello world</span></div> .center{ width: 500px; height: 200px; border: 1px solid #000; } span{ line-height: 200px; }
定高時,定位方式,垂直居中
.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top:50%; margin-top: -50px; }
三:水平垂直居中
水平垂直居中實際上是水平居中和垂直居中的結合,單獨拆分開可以實現某個方位的居中舉個栗子flex布局,水平垂直布局
// justify-content和align-items結合使用,實現水平垂直布局 .center{ width: 500px; height: 200px; border: 1px solid #000; display: flex; // 1. 主軸方向,水平居中 justify-content: center; // 2. 交叉軸方向,垂直居中 align-items:center; // 3. 兩者結合,水平垂直居中 }
flex布局,水平垂直居中
.center{ width: 500px; height: 200px; border: 1px solid #000; display: flex; } .block{ width: 200px; height: 100px; border: 1px solid #00f; // 1. 每個項目的margin設置為auto,實現水平垂直居中 margin: auto; // 2. 水平居中 margin : 0 auto; // 3. 垂直居中 margin : auto 0; }
定寬高時,絕對定位實現水平垂直居中,常用于彈出框
.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto; }
不定寬高時,水平垂直居中,定位方式,transform
.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative; } .block{ border: 1px solid #00f; position: absolute; // 1. 單獨設置left,translate(-50%,0)即可實現水平居中 // 2. 單獨設置top,translate(0,-50%)即可實現垂直居中 left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -0-transform:translate(-50%,-50%); transform: translate(-50%,-50%); }
四:總結
1. 最好不使用定位方式,因為它對整體的布局影響很大。2. 不考慮兼容性時,用flex布局3. 元素被放置在半像素位置時,用transform-style:preserve-3d解決
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!