다음 편집기는 Flexbox를 사용하여 수평 및 수직 중앙 정렬을 구현하는 CSS 레이아웃을 만드는 간단한 예를 보여줍니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라가서 살펴보겠습니다.
Flexbox는 p 요소를 본문 페이지의 가로 및 세로 중앙에 배치합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Flexbox制作CSS布局实现水平垂直居中</title> <style type="text/css"> html { height: 100%; } body { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*垂直居中*/ /*老版本语法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本语法*/ -ms-flex-align: center; /*新版本语法*/ -webkit-align-items: center; align-items: center; /*水平居中*/ /*老版本语法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本语法*/ -ms-flex-pack: center; /*新版本语法*/ -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100% /* needed for Firefox */ } /*实现文本垂直居中*/ .box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width:500px; height: 200px; background: red; color: #fff; font-weight: bold; font-size: 30px; } </style> </head> <body> <p class="box">Flexbox制作CSS布局实现水平垂直居中</p> </body> </html>
위 기사에서는 Flexbox를 사용하여 만듭니다. 수평 및 수직 정렬을 달성하기 위한 CSS 레이아웃 센터링의 간단한 예는 편집자가 공유한 모든 내용을 참조할 수 있기를 바라며, PHP 중국어 웹사이트도 지원해 주시길 바랍니다.
Flexbox에서 생성된 CSS 레이아웃을 사용한 수평 및 수직 센터링 예제 분석에 대한 더 관련 있는 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!