CSS实现元素垂直居中的方法小结

来源：互联网发布：js顶部滑动菜单栏编辑：程序博客网时间：2024/06/10 09:07

复制源码至编辑器查看即可

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.parents {width: 300px;height: 300px;border: 1px solid red;margin: 0 0 50px 0;}.son{width: 100px;height: 100px;background: red;}.onePar{position: relative;}.oneSon{position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}.twoPar{position: relative;}.twoSon{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}.threePar {position: relative;}.threeSon{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.fourPar{display: table-cell;vertical-align: middle;text-align: center;}.fourSon{display: inline-block;}.fivePar{ text-align: center;}.fivePar:before{ content: ''; display: inline-block; vertical-align: middle; height: 100%; background: yellow;}.fiveSon{ display: inline-block; vertical-align: middle; }.sixPar{display: flex;align-items: center;justify-content: center;}.sixSon{}</style></head><body><h1>1</h1><div class="parents onePar"><div class="son oneSon">111</div></div><h1>2</h1><div class="parents twoPar"><div class="son twoSon">111</div></div><h1>3</h1><div class="parents threePar"><div class="son threeSon">111</div></div><h1>4</h1><div class="parents fourPar"><div class="son fourSon">111</div></div><h1>5</h1><div class="parents fivePar"><div class="son fiveSon">111</div></div><h1>6</h1><div class="parents sixPar"><div class="son sixSon">111</div></div></body></html>

阅读全文

0 0