css佈局之居中
阿新 • • 發佈:2019-08-23
CSS佈局之居中
本文主要是介紹水平居中,垂直居中,還有水平垂直居中的方法
水平居中
1.行內元素水平居中 使用text-align:center;就可以實現行內元素的水平居中,但是記得要在父元素中設定,會對子元素生效。此方法對,inline、inline-block、inline-table、inline-flex都有效。
.box{ text-align:center; }
此外,如果塊級元素包著一個塊級元素,那麼我們可以設定外部盒子text-align:center;給內部盒子設定display:inline-block;這樣也可以使得內部元素居中。但要注意的是,內部盒子已經設定了display:inline-block,就不可以再設定其他的display,所以最好不要使用這種方法。
<div class="parent"> <div class="child"> </div> </div> <style> .parent{ text-align:center; } .child{ display:inline-block } </style>
2.塊級元素水平居中
使用margin居中
margin:0 auto;但是使用這種方法,要記得給元素設定寬度,否則不會生效
使用absolute+transform
absolute定位,左 50%,然後使用transform向左移動50%;
3.浮動元素水平居中
-
已知寬度,通過子元素設定relative+負margin
.child{ width:200px; float:left; position:relative; left:50%; margin:-100px; }
-
未知寬度,父子元素都用相對定位
.parent{ float:left; postion:relative; left:50%; } .child{ float:left; position:relative; right:50%; }
父元素相對於左定位50%;且因為,父元素的寬度是由子元素撐起來的,所以當子元素相對於自身右定位50%時,水平居中
示例 當我們把child的定位取消時
開啟child的相對定位時
4.絕對定位元素水平居中 這種方式通過子元素的絕對定位,外加margin:0 auto;
.parent{ position:relative; } .child{ postion:absolute; width:100px; height:100px; background:red; margin:0 auto; left:0; right:0; }
垂直居中
1.單行內聯元素垂直居中 這種方法適合對單行文字的垂直居中,比如應用在頂部選單欄中
.parent{ height:100px; line-height:100px; }
2.塊級元素垂直居中
使用absolute+負margin
.parent{ position:relative; } .child{ height:100px; position:absolute; top:50%; margin-top:-50px; }
使用absolute+tranform
.parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); }
水平垂直居中
可以參考上面的水平居中和垂直居中的方法,結合起來就可以