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:

Liu 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:

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:

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:

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都是能顺利兼容的。代码如下：

复制代码 代码如下:

 

    http://nec.netease.com/img/s/1.jpg" alt="" />
    http://nec.netease.com/img/s/1.jpg" alt="" />

.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水平垂直居中方法。
先上代码：

复制代码 代码如下:

 

   

我是水平垂直居中噢！

 

.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来实现的水平垂直居中的方法。

复制代码 代码如下:

 

我是通过flex的水平垂直居中噢！

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;
}

效果如下：

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

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