简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-06-24 11:46:58
원래의
1130명이 탐색했습니다.

要点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>
로그인 후 복사

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;    }
로그인 후 복사

 运行效果

运行时实际尺寸

관련 라벨：
css水平居中，竖直居中技巧
원천：php.cn
이전 기사：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnose 다음 기사：HTML5属性_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
수직으로 회전된 표 제목, 중앙 + 하단 정렬, 브라우저 간 Chrome에서는 예상대로 보이지만 Firefox에서는 그렇지 않은 회전된 헤더가 있는 테이블이 있습니다. Chromev108(수직 하단, 수평 중간) ✅Fire...
에서 2024-04-04 16:45:25
0
1
330
재작성된 제목: 크기를 조정할 때 고정 HTML 정사각형 또는 원 요소를 가로 및 세로 중앙에 배치 다양한 크기의 정사각형 또는 원형 고정 HTML 요소를 가로 및 세로로 중앙에 배치하는 방법은 무엇입니까? 너비와 높이가 동일하게 유지되어야 한다는 사실 때문에 ...
에서 2024-04-04 12:31:51
0
1
322
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！