元素水平垂直居中的几种常用方法
生活随笔
收集整理的這篇文章主要介紹了
元素水平垂直居中的几种常用方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>元素水平垂直居中</title><style>/*方式一*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}/*方式二*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50px,-50px);/*或者transform: translate(-50%,-50%);*/}/*方式三 技巧*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}/*方式四 彈性盒*/.father{display: flex;width: 400px;height: 400px;background: red;justify-content: center;align-items: center;}.son{width: 100px;height: 100px;background: aqua;}</style></head><body><div class="box">我需要用多種方式居中你</div><div class="father"><div class="son"></div></div></body>
</html>
?
轉載于:https://www.cnblogs.com/lhl66/p/8724939.html
總結
以上是生活随笔為你收集整理的元素水平垂直居中的几种常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一霎清明雨，实现考勤管理。
- 下一篇： 问题集合与纠正