简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

css水平居中，竖直居中技巧_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:46:58
asal
1107 orang telah melayarinya

要点1：容器设置【position: absolute;】

要点2：容器设置【top: 50%;left: 50%;】

要点3：要知道容器实际的width和heigh（可以是预设的，也可以是运行时动态获取到的）

要点4：水平居中：margin-left = -1*（width/2），例如width是280px，则设置【margin-left:140px;】

要点5：竖直居中：margin-top = -1*（height/2），例如height是110px，则设置【margin-top:55px;】

 

例子如下：

html

<html><head></head><body><div id="alert">    <div class="alert-header" style="display: none;">信息提示</div>    <div class="alert-message">GOOD</div>    <div class="alert-footer">        <div class="btn-close">确定</div>    </div></div></body></html>
Salin selepas log masuk

css

    #alert {        position: absolute;        width: 280px;        top: 50%;        left: 50%;        margin-top: -55px;        margin-left: -140px;        border-radius: 5px;        background: #fff;        z-index: 1000000;        padding: 20px;    }
Salin selepas log masuk

 运行效果

运行时实际尺寸

Label berkaitan：
css水平居中，竖直居中技巧
sumber：php.cn
Artikel sebelumnya：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnose Artikel seterusnya：HTML5属性_html/css_WEB-ITnose
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
Artikel terbaru oleh pengarang
Isu terkini
Menjajarkan tengah kandungan sel grid Saya mahu menjajarkan kandungan di tengah dalam item grid, berpusat secara mendatar tetapi...
daripada 2023-09-15 10:34:15
0
1
274
Item grid CSS lebar penuh menggunakan place-content: center Saya memusatkan div secara menegak dan mendatar dalam bekas tetap menggunakan grid CSS pla...
daripada 2023-09-05 17:54:47
0
2
227
Bagaimana untuk menambah kelas CSS Tailwind untuk tag <html> dan <body> dalam Nuxt 3? Saya cuba membuat halaman ralat 404 tersuai menggunakan tailwind untuk aplikasi Nuxt3 saya...
daripada 2023-09-04 19:20:05
0
1
315
Bagaimana untuk memusatkan teks (mendatar dan menegak) di dalam blok div? Ihaveadivsettodisplay:block(90pxheightandwidth),andIhavesometextinside.Saya memerlukan tek...
daripada 2023-08-24 16:58:26
0
2
276
Mencapai penjajaran tengah mendatar elemen Bagaimana untuk memusatkan &lt;div&gt; secara mendatar di dalam &lt;div&gt...
daripada 2023-08-21 10:25:54
0
2
236
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！