元素示例

<template><div class="margin"style="width: 500px;height: 500px;background-color: yellow"><div class="center"style="width: 200px;height: 200px;background-color: red"></div></div> </template>

?

Part.1? 絕對定位 + 百分比

.margin {position: relative; } .center {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px; }

?

Part.2? 絕對定位 + transform

.margin {position: relative } .center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) }

?

Part.3? 絕對定位 + 0

.margin {position: relative } .center {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto }

?

?

Part.4? flex

.margin {display: flex;justify-content: center;align-items: center; }

?

Part.5? flex + margin

.margin {display: flex } .center {margin: auto }

轉載于:https://www.cnblogs.com/langxiyu/p/11177487.html

總結

以上是生活随笔為你收集整理的css 垂直居中的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。