CSS를 사용하여 div를 가로 중앙에 배치하는 방법

CSS를 사용하여 div를 가로 중앙에 맞추는 방법: 1. "margin: 0 auto" 스타일을 div 요소로 설정합니다. 2. "text-align: center" 스타일을 상위 div 요소로 설정하고 이를 설정합니다. 하위 div 요소에 "display: inline-block" 스타일을 추가합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 여백 적응형

방법: 요소 바인딩 속성: margin: 0 auto;margin: 0 auto;

  <div class="div-parent">
            <style>
                .div-parent {
                  width: 400px;
                  height: 200px;
                  background-color: #aaa;
                }
                .div-child {
                    width: 100px;
                    height: 50px;
                    background-color: #007FFF;
                    margin: 0 auto;
                }
            </style>   
            <div class="div-child"></div>
        </div>

 效果：

注意：常用，适用于已知父级元素宽度的情况

2、行内块元素

方式：父级元素设置属性：text-align: center;

         子一级元素设置属性：display: inline-block;

<div class="div-parent">
        <style>
            .div-parent {
              width: 400px;
              height: 200px;
              background-color: #aaa;
              text-align: center;
            }
            .div-child {
                width: 100px;
                height: 50px;
                background-color: #007FFF;
                display: inline-block;
            }
        </style>
            <div class="div-child"></div>
        </div>

效果如图：

注意：inline-block存在浏览器兼容性问题，另行处理因设置inline-block带来的副作用。

补充：使用定位

方式：父级元素设置属性：position: relative;

         子一级元素设置属性：position: absolute;

<div class="div-parent">
        <style>
            .div-parent {
              width: 400px;
              height: 200px;
              background-color: #aaa;
              position: relative;
            }
            .div-child {
                width: 80px;
                height: 50px;
                background-color: #007FFF;
                position:absolute;
                left: 40%;
               }
        </style>
            <div class="div-child"></div>
        </div>

효과:

참고: 일반적으로 사용됨 , 상위 요소의 너비가 알려진 상황에 적합

2. 인라인 블록 요소

🎜메서드: 🎜상위 요소 설정 속성: text-align: center;🎜🎜        First- 레벨 요소 설정 속성: display: inline-block;🎜rrreee🎜효과는 그림과 같습니다: 🎜🎜🎜🎜🎜참고: 🎜inline-block에는 브라우저 호환성 문제가 있습니다. 인라인 블록으로 인한 부작용 설정으로 인해 별도로 처리됩니다. 🎜🎜🎜보충: 위치 지정 사용🎜🎜🎜🎜🎜 방법: 🎜상위 요소의 속성 설정: position:relative;🎜🎜 하위 수준 요소 속성 설정: 위치: 절대;🎜rrreee🎜효과는 그림과 같습니다: 🎜🎜🎜🎜🎜🎜🎜참고: 🎜는 상위 요소의 너비가 알려진 상황에 적합합니다. 중앙 위치를 직접 설정하는 것이 더 번거롭습니다. 🎜🎜【추천 학습: 🎜css 동영상 튜토리얼🎜】🎜

위 내용은 CSS를 사용하여 div를 가로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!