零散的知識不整理進入自己的知識框架太容易忘机隙,對于CSS腦子里零零散散的圣猎!整理自勉禀梳!
水平居中
塊級元素水平居中
margin:auto
此居中的方法前提為居中塊級元素寬度必須固定才可設(shè)置auto自動計算左右補白
.block1{
height: 300px;
width: 600px;
background: black;
}
.block2{
height: 100px;
width: 100px;
margin: auto;
background: red;
}
<div class="block1">
<div class="block2"></div>
</div>
image.png
可見塊2的margin-left,margin-right設(shè)置為auto后實現(xiàn)水平居中浓冒,但是margin-top,margin-bottom設(shè)置為auto確并不能垂直居中衙吩!
特點:瀏覽器兼容性強,但擴展性差芥备,無法自適應(yīng)未知項情況
text-align:center
text-align 屬性規(guī)定元素中的文本的水平對齊方式冬耿!顯然不是用來給塊級元素水平居中的,不過可設(shè)置塊級元素為行內(nèi)塊級元素時便可實現(xiàn)水平居中
.block1 {
height: 300px;
width: 600px;
background: black;
text-align: center;
}
.block2 {
height: 100px;
display: inline-block;
background: red;
}
<div class="block1">
<div class="block2">11111111111</div>
</div>
image.png
特點:擴展性強门躯,但需要額外處理inline-block的瀏覽器兼容性
注:該種方法可以讓display為inline
/inline-block
/inline-table
/inline
/flex
值的子元素居中
position:absolute
通過設(shè)置子元素為絕對定位元素還有l(wèi)eft和margin-left的值可以達(dá)到居中效果
.block1 {
height: 300px;
width: 600px;
position: relative;
background: black;
}
.block2 {
height: 100px;
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
background: red;
}
<div class="block1">
<div class="block2"></div>
</div>
image.png
特點: 必須知道子元素的寬度才能設(shè)置左邊補白的負(fù)值
注:網(wǎng)上有說法可以通過和float來實現(xiàn)不定寬度塊級元素居中(還未深究)
CSS3 flex實現(xiàn)水平居中方法
Flex主要用來布局淆党! Flex布局,可以簡便讶凉、完整、響應(yīng)式地實現(xiàn)各種頁面布局山孔。后面整理flex布局筆記懂讯!
.block1 {
height: 300px;
width: 600px;
display: flex;
justify-content: center;
background: black;
}
.block2 {
height: 100px;
background: red;
}
<div class="block1">
<div class="block2">1123123</div>
</div>
image.png
特點:實現(xiàn)便捷,擴展性強但兼容需要考慮
CSS3 width:fit-content
width:fit-content可以實現(xiàn)元素收縮效果的同時台颠,保持原本的block水平狀態(tài)褐望,于是,就可以直接使用margin:auto實現(xiàn)元素向內(nèi)自適應(yīng)同時的居中效果了
.block1 {
height: 300px;
width: 600px;
background: black;
}
.block2 {
height: 100px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
background: red;
}
<div class="block1">
<div class="block2">1123123</div>
</div>
image.png
特點:擴展性強串前,但兼容性差;
float
浮動居中有待好好研究瘫里!
特點:兼容性強,擴展性強荡碾!但實現(xiàn)原理較復(fù)雜