css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让img图片居中显示呢？本篇文章给大家带来css如何让img图片居中？css的display属性实现图片居中（代码实例），让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。
首先我们来了解一下display属性实现图片居中的两种方法是什么？
1、利用display的table-cell属性值，再配合text-align: center;与vertical-align: middle;设置图片居中
2、设置display: flex;，利用弹性布局flex来设置img图片的居中
下面我们通过简单的代码示例，详细了解一下这两种方法是怎么实现图片居中的。
1、利用display:table-cell来实现img标签图片的水平和垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
.demo{
width: 400px;
height: 300px;
border: 1px dashed #000;
display: table-cell; /*主要是这个属性*/
vertical-align: middle;
text-align: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>效果图：
说明：
在demo盒子中设置display: table-cell;会让demo盒子作为一个表格单元格显示（类似
2、弹性布局flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
display: flex;
justify-content: center;
align-items: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>效果图：
说明：
设置display: flex;实现flex弹性布局，在设置justify-content: center;让图片水平居中对齐，设置align-items: center;让图片垂直居中对齐。
总结：以上就是css的display属性实现图片居中两种方法的全部介绍，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程，Html5视频教程，bootstrap视频教程！
Atas ialah kandungan terperinci css如何让img图片居中？css的display属性实现图片居中（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Cara melaksanakan reka letak fleksibel dan reka bentuk responsif melalui vue dan Element-plus
Jul 18, 2023 am 11:09 AM
Cara melaksanakan reka bentuk yang fleksibel dan reka bentuk responsif melalui vue dan Element-plus Dalam pembangunan web moden, reka bentuk yang fleksibel dan reka bentuk responsif telah menjadi trend. Reka letak fleksibel membolehkan elemen halaman melaraskan saiz dan kedudukannya secara automatik mengikut saiz skrin yang berbeza, manakala reka bentuk responsif memastikan halaman dipaparkan dengan baik pada peranti yang berbeza dan memberikan pengalaman pengguna yang baik. Artikel ini akan memperkenalkan cara melaksanakan reka letak fleksibel dan reka bentuk responsif melalui vue dan Element-plus. Untuk memulakan kerja kami, kami
Bagaimana untuk mencapai kesan tatal mendatar melalui susun atur CSS Flex
Sep 27, 2023 pm 02:05 PM
Ringkasan cara untuk mencapai kesan tatal mendatar melalui reka letak anjal CssFlex: Dalam pembangunan web, kadangkala kita perlu memaparkan satu siri item dalam bekas dan berharap item ini boleh menatal secara mendatar. Pada masa ini, anda boleh menggunakan susun atur elastik CSSFlex untuk mencapai kesan tatal mendatar. Kita boleh mencapai kesan ini dengan mudah dengan melaraskan sifat bekas dengan kod CSS mudah. Dalam artikel ini, saya akan memperkenalkan cara menggunakan CSSFlex untuk mencapai kesan tatal mendatar dan memberikan contoh kod khusus. CSSFl
Cara menggunakan susun atur CSS Flex untuk melaksanakan reka bentuk responsif
Sep 26, 2023 am 08:07 AM
Cara menggunakan reka letak anjal CSSFlex untuk melaksanakan reka bentuk responsif Dalam era peranti mudah alih yang meluas hari ini, reka bentuk responsif telah menjadi tugas penting dalam pembangunan bahagian hadapan. Antaranya, menggunakan susun atur elastik CSSFlex telah menjadi salah satu pilihan popular untuk melaksanakan reka bentuk responsif. Reka letak anjal CSSFlex mempunyai kebolehskalaan dan kebolehsuaian yang kuat, serta boleh melaksanakan reka letak skrin dengan saiz yang berbeza dengan cepat. Artikel ini akan memperkenalkan cara menggunakan reka letak elastik CSSFlex untuk melaksanakan reka bentuk responsif dan memberikan contoh kod khusus.
Bagaimana untuk memusatkan div dalam html
Apr 05, 2024 am 09:00 AM
Terdapat dua cara untuk memusatkan div dalam HTML: Gunakan atribut penjajaran teks (text-align: center): Untuk reka letak yang lebih ringkas. Gunakan reka letak fleksibel (Flexbox): Sediakan kawalan reka letak yang lebih fleksibel Langkah-langkahnya termasuk: mendayakan Flexbox (paparan: flex) dalam elemen induk. Tetapkan div sebagai item Flex (flex: 1). Gunakan sifat align-item dan justify-content untuk pemusatan menegak dan mendatar.
Penjelasan terperinci tentang jarak dan kaedah pemprosesan ruang putih dalam susun atur fleksibel CSS Flex
Sep 26, 2023 pm 08:22 PM
Penjelasan terperinci tentang jarak dan kaedah pemprosesan ruang putih dalam reka letak fleksibel CSSFlex Pengenalan: Reka letak fleksibel CSSFlex ialah kaedah reka letak yang sangat mudah dan fleksibel, yang boleh membantu kami membuat reka letak halaman web responsif dengan mudah. Apabila menggunakan reka letak Flex, anda sering menghadapi masalah dengan menetapkan jarak dan menangani ruang putih. Artikel ini akan memperincikan cara mengendalikan jarak dan ruang kosong dalam reka letak Flex dan memberikan contoh kod khusus. 1. Tetapkan jarak Dalam susun atur Flex, kita boleh menetapkan jarak dalam beberapa cara. Ini diperkenalkan di bawah
Cara menggunakan susun atur CSS Flex untuk mencapai susun atur lajur ketinggian yang sama
Sep 27, 2023 pm 03:17 PM
Cara menggunakan Reka Letak Fleksibel CSS untuk melaksanakan susun atur lajur sama ketinggian Layout Kotak Fleksibel CSS (CsS FlexibleBox Layout), dirujuk sebagai reka letak Flex, ialah modul yang digunakan untuk reka letak halaman. Reka letak fleksibel memudahkan kami melaksanakan reka letak lajur sama ketinggian, supaya ia boleh dipaparkan pada ketinggian yang sama tanpa mengira ketinggian kandungan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan susun atur CSSFlex untuk mencapai susun atur lajur ketinggian yang sama. Di bawah ialah contoh kod khusus. Struktur HTML: &
Bagaimana untuk melaksanakan susun atur dua lajur melalui susun atur CSS Flex
Sep 26, 2023 am 10:54 AM
Cara melaksanakan reka letak dua lajur melalui reka letak fleksibel CSSFlex Reka letak fleksibel CSSFlex ialah teknologi reka letak moden yang memudahkan proses reka letak halaman web, membolehkan pereka bentuk dan pembangun membuat reka letak yang fleksibel dan boleh disesuaikan dengan pelbagai saiz skrin dengan mudah. Antaranya, melaksanakan susun atur dua lajur adalah salah satu keperluan biasa dalam susun atur Flex. Dalam artikel ini, kami akan memperkenalkan cara menggunakan reka letak anjal CSSFlex untuk melaksanakan reka letak dua lajur yang mudah dan menyediakan contoh kod khusus. Menggunakan bekas dan projek Flex
Panduan untuk sifat susun atur fleksibel CSS: letak melekit dan kotak fleksibel
Oct 27, 2023 am 10:06 AM
Panduan untuk Ciri Reka Letak Fleksibel CSS: positionsticky dan flexbox Reka letak fleksibel telah menjadi teknik yang sangat popular dan berguna dalam reka bentuk web moden. Ia boleh membantu kami membuat reka letak halaman web yang boleh suai supaya halaman web boleh memaparkan dan bertindak balas dengan baik pada peranti dan saiz skrin yang berbeza. Artikel ini akan menumpukan pada dua sifat susun atur yang fleksibel: position:sticky dan flexbox. Kami akan membincangkan penggunaannya secara terperinci, dengan contoh kod konkrit
