- 프런트엔드
- HTML| CSS| JavaScript| Vue.js
최신 권장사항
-
Php8, 나도 갈게
84669인 학습
- 네이티브 파운데이션
- HTML| CSS| HTML5| CSS3| JavaScript
최신 권장사항
-
30분 안에 웹사이트 레이아웃 배우기
152542인 학습
- 기초 소개
- MySQL| SQL Server
최신 권장사항
-
Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지
20005인 학습
최신 권장사항
-
UNI-APP 코드의 첫 번째 줄
5487인 학습
-
처음부터 앱 실행까지 Flutter
7821인 학습
최신 권장사항
-
-
Zero 기본 숙련도 PS 비디오 튜토리얼
180660인 학습
-
시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼
48569인 학습
-
PS 기술 및 슬라이싱 기술 비디오 튜토리얼
18603인 학습
최신 권장사항
-
Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼
40936인 학습
-
컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식
1549인 학습
-
프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명
1183인 학습
-
웹소켓 비디오 튜토리얼
32909인 학습
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tivon的方案不错，改进一下：
https://gist.github.com/4326240
呃，有没有办法直接嵌入gist的？
HTML：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="c"> <p>垂直居中</p> </p> </body> </html>CSS：
#c { display:table; height:400px; } #c p { display: table-cell; vertical-align: middle; }http://jsfiddle.net/dGyuC/2/
不用js的话我只能想到这个了。
1、
table-cell方法，ls有讲2、如果知道子元素高度的话，可以有另一种好点的办法。假设子元素高度是100px。可以把父元素设为
position: relative；然后父元素和子元素中间加一层position: absolute; top: 50%的p；最后最里面的子元素position: relative; top: -50px;3、如果不用担心浏览器兼容性的话，可以用CSS transform（但是IE6-8不支持）。类似方法二，但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。
<p><center >垂直居中</center></p>好像看见kejun在微博上提过这种写法，用button标签，里面的内容默认就是水平垂直居中的，当然需要定义button样式。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用button垂直水平居中</title> <style type="text/css"> html,body,button{width: 100%;height: 100%;margin: 0;padding: 0;} </style> </head> <body> <button><p>wording</p></button> </body> </html>除了上述的方法，还可以试试flexbox布局模式（Chrome当前版本仍然需要添加前缀“-webkit-”）
不过该规范最近才达到稳定，在主要的浏览器对新的版本有相当完整的支持，但有些浏览器对它的实现也许并不相同。
看这里，通用方案。
https://github.com/sofish/Alice/blob/...
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> html, body { height:100%; padding:0; margin:0 } #floater { height:50%; margin-bottom:-150px; position:relative; } p { background:#933; height:300px; position:relative; } </style> </head> <body> <p id="floater"> </p> <p>垂直居中</p> </body> </html>忍不住想来回答下。对于不固定宽高的元素要居中的方法：父类p设置text-align:center.该需要居中的元素设置display:inline-block
来个不一样的，去360面试的时候没答出来，被鄙视了，现在写个正确的