CSS3 提供了许多对 div 元素居中的方法,下面介绍几种常用的方法。
第一种方法: { display: flex; justify-content: center; align-items: center; }
使用 flexBox 线性布局,通过设置 justify-content 和 align-items 属性让 div 元素在水平和垂直方向上均居中。
第二种方法: { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
使用绝对定位,通过设置 top 和 left 属性让 div 元素的左上角与页面的中心对齐,再通过 transform 属性将其向左上方偏移自身高度和宽度的一半,即让其中心与页面中心对齐。
第三种方法: { position: relative; margin: auto; }
使用相对定位,通过设置 margin 属性让 div 元素的左右和上下间距均为 auto,即在父元素中水平和垂直方向上居中。