요소의 수평 및 수직 중심을 설정하는 두 가지 방법은 무엇입니까?

　가로 및 세로 중앙에 모달 팝업 상자를 만드는 작은 요구 사항은 우리와 같은 프런트 엔드에 공통적입니다.

CSS3가 나오기 전에는 요소를 가로와 세로 모두 가운데에 배치하는 방법(내가 생각할 수 있는 방법)은 단 한 가지뿐이었습니다. 그것은 js 계산을 사용하여 요소를 화면 중앙에 배치하는 것이었습니다. 이 방법은 서툴고 번거롭습니다.

　다음 두 가지 방법을 사용하면 요소를 화면 중앙에 빠르게 배치할 수 있습니다.

　유연한 레이아웃

<style>
    .flex-mask {
        display: flex;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        align-items: center;　　// 垂直居中
        justify-content: center;　　// 水平居中
        background: rgba(0,0,0,.5);
    }
    .flex-box {
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
    }
</style>

<!-- 元素 -->
<p class="flex-mask">
    <p class="flex-box"></p>
</p>

　번역 사용

<style>
    .transform-box {
        position: fixed;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 150px;
        background-color: red;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
</style>
<p class="transform-box"></p>

위 내용은 요소의 수평 및 수직 중심을 설정하는 두 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!