masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Jadual Kandungan
1.水平居中?使用 text-align 
2. margin: auto 居中
3. table-cell 居中
4. Absolute 居中
5. 使用 translate 居中
6. 使用 Flexbox 居中
7. 使用 calc 居中
Rumah hujung hadapan web html tutorial CSS实现居中的7种方法_html/css_WEB-ITnose

CSS实现居中的7种方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:53 AM

实现HTML元素的居中 看似简单，实则不然

水平居中比如容易，垂直居中比较难搞定，水平垂直都居中更不容易。在这个响应式布局的年代，很难固定元素的宽高，俺统计了一下，目前的几种方法。本文由浅入深逐个介绍，使用了同一段HTML代码：

<div class="center">
Salin selepas log masuk</div></div> 
<img src="/static/imghw/default1.png"  data-src="jimmy-choo-shoe.jpg"  class="lazy"   alt="">
Salin selepas log masuk</div></div> 
</div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div>

下面鞋子图片会变化但原始大小始终是500px × 500px，主题背景颜色使用了HSL colors

1.水平居中?使用 text-align

有些场景下 简单的方法就是最好的方法

div.center { text-align: center; background: hsl(0, 100%, 97%); }
Salin selepas log masuk</div></div> 
div.center img { width: 33%; height: auto; }
Salin selepas log masuk</div></div>

但该方法不能让图片垂直居中：需要给 div 添加 padding 或 给 div 中的元素添加 margin-top 和 margin-bottom

2. margin: auto 居中

同样也是水平居中，局限性跟第1种方法一样：

div.center { background: hsl(60, 100%, 97%); }
Salin selepas log masuk</div></div> 
div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }
Salin selepas log masuk</div></div>

注意 display: block, 这种情况下必须有 margin: 0 auto.

3. table-cell 居中

使用 display: table-cell, 可以实现水平垂直都居中。通常需要添加一个额外的空元素。

<div class="center-aligned">
Salin selepas log masuk</div></div> 
<div class="center-core">
Salin selepas log masuk</div></div> 
<img  src="/static/imghw/default1.png"  data-src="jimmy-choo-shoe.jpg"  class="lazy" alt="CSS实现居中的7种方法_html/css_WEB-ITnose" >
Salin selepas log masuk</div></div> 
</div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div> 
</div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div>
Salin selepas log masuk</div></div>

CSS 代码:

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }
Salin selepas log masuk</div></div> 
.center-core { display: table-cell; text-align: center; vertical-align:middle; }
Salin selepas log masuk</div></div> 
.center-core img { width: 33%; height: auto; }
Salin selepas log masuk</div></div>

注意 width: 100% 是为了防止 div 折叠，外面的容器需要一个高度才能垂直居中。 如果垂直居中的元素是放在 . body 中的话，需要给 html 和 body 设置 height. 在所有浏览器中均有效，包括 IE8+.

4. Absolute 居中

最近 Stephen Shaw 推广的一项新技术可以很好地兼容各种浏览器。唯一的缺点是外部容器必须声明height 

.absolute-aligned {
Salin selepas log masuk</div></div> 
position: relative; min-height: 500px;
Salin selepas log masuk</div></div> 
background: hsl(200, 100%, 97%);
Salin selepas log masuk</div></div> 
.absolute-aligned img {
Salin selepas log masuk</div></div> 
width: 50%;
Salin selepas log masuk</div></div> 
min-width: 200px;
Salin selepas log masuk</div></div> 
height: auto;
Salin selepas log masuk</div></div> 
overflow: auto; margin: auto;
Salin selepas log masuk</div></div> 
position: absolute;
Salin selepas log masuk</div></div> 
top: 0; left: 0; bottom: 0; right: 0;
Salin selepas log masuk</div></div>

Stephen 在 他的文章 中验证了这段代码的许多版本

5. 使用 translate 居中

Chris Coiyer 提出了一个新的方法：使用 CSS transforms. 同时支持水平居中和垂直居中:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }
Salin selepas log masuk</div></div> 
.center img { position: absolute; top: 50%; left: 50%;
Salin selepas log masuk</div></div> 
transform: translate(-50%, -50%); width: 30%; height: auto; }
Salin selepas log masuk</div></div>

有以下缺点:

  • CSS transform 需要针对不同的浏览器使用 特定的前缀 （-moz 或 -o 或 -webkit）
  • 在低版本的IE (IE8 及以下 )中无效
  • 外部容器需要设置高度 height (or gain it in some other way) 因为它不能从它的absolutely-positioned 内容上获得高度.
  • 如果内容包含 text, 当前浏览器合成技术对文本解释得很模糊.

    • 6. 使用 Flexbox 居中

    一旦属性变量和特定前缀消失的话，这种方法很可能成为首选的居中方案.

    .center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }
    Salin selepas log masuk</div></div> 
    .center img { width: 30%; height: auto; }
    Salin selepas log masuk</div></div>

    在许多方面 flexbox 是最简单的解决方案，但制约因素是 各种陈旧语法和低版本的IE， (尽管 display: table-cell是一个可以接受的方案). 完整的 CSS代码:

    .center { background: hsl(240, 100%, 97%);
    Salin selepas log masuk</div></div> 
    display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
    Salin selepas log masuk</div></div> 
    display: -moz-box; /* OLD: Firefox (can be buggy) */
    Salin selepas log masuk</div></div> 
    display: -ms-flexbox; /* OLD: IE 10 */
    Salin selepas log masuk</div></div> 
    display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
    Salin selepas log masuk</div></div> 
    display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
    Salin selepas log masuk</div></div> 
    -webkit-box-align: center;
    Salin selepas log masuk</div></div> 
    -moz-box-align: center;
    Salin selepas log masuk</div></div> 
    -ms-flex-align: center;
    Salin selepas log masuk</div></div> 
    -webkit-align-items: center;
    Salin selepas log masuk</div></div> 
    align-items: center;
    Salin selepas log masuk</div></div> 
    -webkit-box-pack: center;
    Salin selepas log masuk</div></div> 
    -moz-box-pack: center;
    Salin selepas log masuk</div></div> 
    -ms-flex-pack: center;
    Salin selepas log masuk</div></div> 
    -webkit-justify-content: center;
    Salin selepas log masuk</div></div> 
    justify-content: center;
    Salin selepas log masuk</div></div>

    现在规范已经形成，浏览器也支持， I have written extensively on flexbox layout and its uses.

    7. 使用 calc 居中

    在某些场景下比 flexbox 更通用:

    .center { background: hsl(300, 100%, 97%); min-height: 600px; position:relative; }
    Salin selepas log masuk</div></div> 
    .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }
    Salin selepas log masuk</div></div>

    显而易见, calc 允许在当前的页面布局上进行计算。在上面的例子中，50% 是容器中元素的中间点，但是单独使用会使得image的左上角位于

    中间。我们需要把width 和height 再往回拉一下，大小分别是图片width 和height 的一半。表达式如下:

    top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
    Salin selepas log masuk</div></div>

    在目前的浏览器中，你可以发现：当内容 fixed 且大小已知的时候，该技术效果最佳:

    .center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px ? 2)); }
    Salin selepas log masuk</div></div>

    calc 这种方法跟 flexbox 一样也有很多潜在的缺点: 支持Firefox 4 及更高版本浏览器，对于更早版本的浏览器，需要添加前缀，不支持IE8。图片居中的完整代码:

    .center img { width: 40%; height: auto; position: absolute;
    Salin selepas log masuk</div></div> 
    top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
    Salin selepas log masuk</div></div> 
    top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
    Salin selepas log masuk</div></div> 
    top: calc(50% - 20%); left: calc(50% - 20%); }
    Salin selepas log masuk</div></div>

    当然还有很多其他的方法，例如 使用伪元素来垂直居中 , 理解这些技术可以让web开发人员在处理居中问题的时候不麻爪！

    原文在这里

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Tunjukkan Lagi

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Assassin's Creed Shadows: Penyelesaian Riddle Seashell
    2 minggu yang lalu By DDD
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Arahan sembang dan cara menggunakannya
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Tunjukkan Lagi

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Tunjukkan Lagi

    Topik panas

    Di manakah pintu masuk log masuk untuk e-mel gmail?
    7526
    15
    Tutorial CakePHP
    1378
    52
    Apakah format nama akaun stim
    81
    11
    kunci pengaktifan win11 kekal
    54
    19
    Sambungan NYT menunjukkan dan jawapan
    21
    74
    Tunjukkan Lagi
    Related knowledge
    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

    Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

    Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

    Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

    GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

    Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

    See all articles