CSS 水平垂直居中对齐在页面布局中十分常见,往往使用在导航、按钮等元素中。本文将介绍如何使用 CSS 实现一个元素相对于其祖先盒子水平垂直居中对齐。 1. 首先,在 HTML 中定义一个需要居中对齐
<div class="center"> <h1>这是一个需要居中对齐的标题</h1> </div>
.center { position: relative; width: 300px; height: 300px; }
.center h1 { position: absolute; top: 50%; left: 50%; }
.center h1 { transform: translate(-50%, -50%); }
<div class="center"> <h1>这是一个需要居中对齐的标题</h1> </div>
.center { position: relative; width: 300px; height: 300px; } .center h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
粉丝
0
关注
0
收藏
0