CSS水平垂直居中方法总结
2018-09-13 10:35
399 查看
一、已经元素宽高(1)定位布局
[code]<div class="box"> <div class="contain"></div> </div>
[code].box{ width:200px; height: 200px; background: red; margin: 0 auto; position: relative; } .contain{ width: 50px; height: 50px; background: gray; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px; }
二、已经元素宽高(2)定位布局
[code].box{ width:200px; height: 200px; background: red; margin: 0 auto; position: relative; } .contain{ width: 50px; height: 50px; background: gray; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) }
三、已经元素宽高(3) flex布局
[code].box{ width:200px; height: 200px; background: red; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .contain{ width: 50px; height: 50px; background: gray; }
四、未知元素宽度(这种是宽度自适应)
[code].box{ width:200px; height: 200px; background: red; margin: 0 auto; position: relative; } .contain{ height: 50px; background: gray; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; }
阅读更多
相关文章推荐
- CSS实现水平垂直居中方法总结
- CSS-垂直|水平居中问题的解决方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- CSS水平垂直居中常见方法总结
- css 实现元素水平垂直居中总结5中方法
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 【Web前端】CSS水平居中和垂直居中的方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- css 块级元素、行内元素的水平、垂直居中方法总结
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
- css中已知宽高的子元素水平垂直居中的三种方法
- CSS水平垂直居中的几种方法
- 垂直水平居中的方法总结和适用场景
- CSS实现水平垂直居中的几种方法
- CSS中元素水平居中和垂直居中的方法
- CSS中元素水平垂直居中4种方法介绍
- CSS水平垂直居中的几种方法2
- css实现水平垂直居中的几种方法
- css元素水平垂直居中的十种方法