div垂直水平居中有哪些方式

flex 布局

<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%">

    <div style="width: 200px;height:200px;background: #aaa"></div>

  </div>

Position transform 不知道宽高的情况一下，transform -50%

<div style="width:100%;height:100%;position:relative">

    <div style="width: 200px;height:200px;background: #aaa;position: absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);"></div>

  </div>

Position margin-left 知道宽度的情况下，取宽度的一半

<div style="width:100%;height:100%;position:relative">

    <div style="width: 200px;height:200px;background: #aaa;position: absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"></div>

  </div>

本文章由javascript技术分享原创和收集