如何实现div水平和垂直居中效果_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

如何实现div水平和垂直居中效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

如何实现div水平垂直和居中效果:

有时候可能我们需要让一个div在它的父容器中居中显示。先看代码实例再进行分析。

代码实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:500px;  height:500px;  border:1px solid red;  position:absolute;}.children{  width:200px;  height:100px;  background-color:green;  position:absolute;  top:50%;  left:50%;  margin:-50px 0 0 -100px;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

登入後複製

上面代码中，使用了position属性实现对象的垂直居中效果。在对子对象使用top:50%和left:50%之后，并没有实现对象的居中，而是实现了对象左上角那一点的垂直居中，图示如下:

我们需要的是对象的中心实现居中，这样的话整个对象就居中了，于是使用margin:-50px 0 0 -100px让对象向上和向左分别移动对象高度的一半和宽度的一半即可。
特别说明:
父对象采用绝对定位，要不然子对象绝对定位会以窗口为参考对象。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/586.html

最为原始地址是:http://www.softwhy.com

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1430

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。