``` <div class="modal-wrapper"> <span class="modal">单行文字水平垂直居中</span> </div> ``` ``` * { box-sizing: border-box; padding: 0; margin: 0; } .modal-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modal { overflow: hidden; background-color: #fff; border-radius: 10px; font-size: 16px; } ``` ``` // 1. flex 布局 .modal-wrapper { display: flex; justify-content: center; align-items: center; } ``` ``` // 2. 绝对定位 + transform .modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ```