CSS中居中方法总结
2019-07-24 19:38
113 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32867271/article/details/97158140
一、水平居中
1.元素:行内;宽度:不定
.outer{ text-align: center; } <div class="outer"> <div class="inner">Hello world</div> </div>
2.元素:块级;宽度:确定
.inner{ margin: 0 auto; } <div class="outer"> <div class="inner">Hello world</div> </div>
3.元素:块级;宽度:不定
.inner{ display:inline; text-align: center; } <div class="outer"> <div class="inner">Hello world</div> </div>
4.元素:块级;宽度:不定
.outer{ float: left; position: relative; left: 50%; clear: both; } .inner{ position: relative; left: -50%; /* 或者right: 50% */ } <div class="outer"> <div class="inner">Hello world</div> </div>
5.元素:块级;宽度:不定
.outer{ position: relative; } .inner{ left: 50%; transform: translateX(-50%); /* 定宽可用:margin-left: (width/2); */ } <div class="outer"> <div class="inner">Hello world</div> </div>
6.元素:块级;宽度:确定/不定
.outer{ display: flex; justify-content: center; } <div class="outer"> <div class="inner">Hello world</div> </div>
二、垂直居中
1.元素:行内;宽度:定高
.inner{ line-height: 200px; /* 行高设为父元素高度*/ } <div class="outer" style="height:200px"> <div class="inner">Hello world</div> </div>
2.元素:不限;宽度:定高
.outer{ position: relative; } .inner{ line-height: 100px; position: absolute; top: 50%; margin-top: -50% } <div class="outer" style="height:200px"> <div class="inner">Hello world</div> </div>
3.元素:不限;高度:不限
.outer{ display: flex; align-items: center; } <div class="outer"> <div class="inner">Hello world</div> </div>
三、水平垂直居中
1.通用
.outer{ display: flex; align-items: center; justify-content: center; } <div class="outer"> <div class="inner">Hello world</div> </div>
2.绝对定位居中
.outer{ position: relative; } inner{ left: 50%; top: 50%; transform: transate(-50%,-50%) } <div class="outer"> <div class="inner">Hello world</div> </div>
相关文章推荐
- CSS垂直居中方法总结(部分翻译)
- CSS在页面布局中实现div水平居中的方法总结(转)
- 自己总结的 css div居中的方法
- CSS文本和div垂直居中方法总结
- CSS-垂直|水平居中问题的解决方法总结
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- CSS 布局实例系列(一)总结CSS居中的多种方法
- 【CSS总结】CSS水平居中的方法
- CSS元素垂直居中方法总结
- 不固定宽度和高度的情况下CSS调整div居中的方法总结
- CSS实现水平垂直居中方法总结
- css让页面居中对齐方法总结
- CSS水平垂直居中方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 【Web前端】CSS水平居中和垂直居中的方法总结
- css 块级元素、行内元素的水平、垂直居中方法总结
- CSS水平居中+垂直居中+水平/垂直居中的方法总结
- CSS有哪些方式可以实现垂直居中(方法大总结)
- css:子元素div 上下左右居中方法总结