Bincangkan pelbagai kaedah pemusatan dalam CSS_CSS/HTML

Hari ini kita akan bercakap tentang pelbagai kaedah pemusatan dalam CSS.
Yang pertama ialah mendatar tengah Cara paling mudah sudah tentu

Salin kod Kod adalah seperti berikut:

margin:0 auto;

Iaitu, tetapkan sifat margin-kiri dan margin-kanan kepada auto untuk mencapai kesan pemusatan mendatar.

Bagaimana dengan cara lain? Biar saya beritahu anda satu persatu:

ketinggian garis

Mula-mula perkenalkan kaedah pemusatan mendatar teks:

Salin kod Kod adalah seperti berikut:

6bab83cd2ea3b0bfa059c0c27e19c040Liu Fang< ;/ div>

Gunakan ketinggian garis untuk menetapkannya kepada ketinggian:

Salin kod Kod adalah seperti berikut:

.wrap{
ketinggian garis: 200px;/*kunci tengah menegak*/
text-align:center;

ketinggian: 200px;
saiz fon: 36px;
warna latar belakang: #ccc;
}

Kesannya adalah seperti berikut:

lapik

Gunakan padding dan klip latar belakang untuk mencapai pemusatan mendatar dan menegak div:

Salin kod Kod adalah seperti berikut:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Dengan menetapkan klip latar belakang kepada kotak kandungan, pangkas latar belakang ke pinggir luar kawasan kandungan, dan kemudian gunakan padding untuk menetapkannya kepada separuh perbezaan antara div luar tolak div dalam:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

Kesannya adalah seperti berikut:

lapik margin

Seterusnya, kami akan memperkenalkan kaedah pengisian margin untuk mencapai pemusatan mendatar dan menegak.
Mula-mula kita takrifkan div ibu bapa-anak:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Di sini kami menetapkan margin atas div anak kepada ketinggian div induk tolak separuh ketinggian div anak, dan kemudian menetapkan limpahan kepada tersembunyi untuk mencetuskan BFC div induk seperti berikut:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

Kesan pemusatan akhir adalah seperti berikut:

kedudukan mutlak

Gunakan position:absolute dengan bahagian atas, kiri 50%, dan kemudian tetapkan jidar kepada nilai negatif untuk memusatkan div secara mendatar dan menegak Pertama, anda masih perlu menentukan div induk dan anak:

Salin kod Kod adalah seperti berikut:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Kemudian tetapkan css yang sepadan:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

Nilai dalam jidar ialah separuh daripada lebar div Hasil akhir ialah:

berpusatkan penjajaran teks

Seperti yang kita sedia maklum, penjajaran teks boleh memusatkan kandungan dalam div secara mendatar. Tetapi bagaimana jika anda ingin memusatkan div kanak-kanak dalam div ini? Anda boleh menetapkan paparan div kanak-kanak kepada inline-block.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

图片居中

一般的图片居中都是和text-align一样，将图片包装在一个div中，将该div的text-align设为center即可。
可以参考下面的链接：
个人站点

有一种特殊的方式，利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，IE6都是能顺利兼容的。代码如下：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  e388a4556c0f65e1904146cc1a846bee
    dbe8b9bd8f9910749c751d9fd062a542
    5e4eb8fa85f3b4e9592f8a12d6aea5a194b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

效果如下：

transform居中

上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。
先上代码：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3
    c029628396f6f9ca1b5558ef22d8b6d9我是水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

效果如下：

 

首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3我是通过flex的水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

效果如下：

这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。

以上就是本文的全部内容，希望大家可以喜欢。