1、定宽高
一、绝对定位和负magin值
<template> <div id="app"> <div class="box"> <div class="children-box"></div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; position: relative; } .children-box { position: absolute; width: 100px; height: 100px; background: yellow; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style>
二、绝对定位 + transform
<template> <div id="app"> <div class="box"> <div class="children-box"></div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; position: relative; } .children-box { position: absolute; width: 100px; height: 100px; background: yellow; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>
三、绝对定位 + left/right/bottom/top + margin
<template> <div id="app"> <div class="box"> <div class="children-box"></div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; position: relative; } .children-box { position: absolute; display: inline; top: 0; left: 0; right: 0; bottom: 0px; background: yellow; margin: auto; height: 100px; width: 100px; } </style>
四、flex布局
<template> <div id="app"> <div class="box"> <div class="children-box"></div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; display: flex; justify-content: center; align-items: center; } .children-box { background: yellow; height: 100px; width: 100px; } </style>
2、不定宽高
一、绝对定位 + transform
<template> <div id="app"> <div class="box"> <div class="children-box">111111</div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; position: relative; } .children-box { position: absolute; background: yellow; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>
二、flex布局
<template> <div id="app"> <div class="box"> <div class="children-box">11111111</div> </div> </div> </template> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid red; display: flex; justify-content: center; align-items: center; } .children-box { background: yellow; } </style>