当前位置：首页 > Web前端 > HTML

关于css居中的事情

时间：2023-04-02 22:06:50 HTML

使用CSS居中的方法有很多种，这里有一些最佳实践。代码简单粗暴，适用性强，让你再也不用为这些琐碎的事情烦恼，提高你的工作效率。早几分钟下班回家不是很好吗？废话不多说，直接上代码的基本样式和布局

.container{height:200px;宽度：200px；背景：#369；}.inner{高度：50px；宽度：50px；背景：#963；}左右居中的两种最简单的写法

左右居中1

左右居中2

.center1{text-align:center;}.center-inner1{显示：内联块；}.center2{显示：弹性；证明内容：居中；}.center-inner2{显示：内联块；}垂直居中的两种最简单的写法

verticalcenter1

垂直中心2

.center3{display:flex;align-items:center;}.center4{position:relative;}.center-inner4{position:absolute;top:50%;transform:translateY(-50%);}左右居中+垂直居中

左右居中+垂直居中

.center5{显示：flex；对齐项目：居中；对齐内容：居中；

关于css居中的事情相关文章