<img src=”https://noxussj.top:3000/19/1.png”></img>

To achieve the above effect, the following list of a few common methods, personal comparison recommended to use Flex layout implementation

Approach 1 (using margin and absolute positioning)

html

<div class="container">
    <div class="box"></div>
</div>

css

.container { position: relative; width: 150px; height: 150px; background-color: #000; .box { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; background-color: #fff; }}

Approach 2 (Layout with Flex)

html

<div class="container">
    <div class="box"></div>
</div>

css

.container { position: relative; width: 150px; height: 150px; background-color: #000; display: flex; justify-content: center; align-items: center; .box { width: 50px; height: 50px; background-color: #fff; }}

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/