css水平垂直居中
2019-04-11 09:53:37来源:博客园 阅读 ()
1.CSS的水平居中,
1.1 父元素是块状元素,子元素为行内元素的居中,直接设置text-aglin: center ,常见的文本,span 标签,button,img等行内元素都是可以使其水平居中的
.box{ text-align: center; } <div class="box"> <span>11111</span> <button>123</button> </div>
1.2 父元素为块状元素,子元素也为块状元素
1.2.1 子元素宽度已知,则可以设置子元素 margin 0 auto,就可以使子元素相对于父元素水平居中
<style> .box{ background-color: pink; } .con-box{ width: 300px; margin: 0 auto; height: 30px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> </div> </div>
1.3 父元素为块状元素,子元素为块状元素宽度不定,直接设置子元素display:inline, 然后设置 父元素的text-aglin:center
<style> .box{ background-color: pink; text-align: center } .con-box{ display: inline; } </style> <div class="box"> <div class="con-box"> 111111 </div> </div>
注: 使用弹性布局,使用定位,都是可以使子元素相对于父元素水平居中的
2.垂直居中
2.1 父元素为块状元素,子元素为行内元素,如单行文本,直接设置父元素的line-height 等于父元素的高度,
<style> .box{ background-color: pink; height: 50px; line-height: 50px; } .con span{ line-height: 50px; } </style> <div class="box"> <span> 111111</span> </div>
2.2 父元素为块状元素,子元素为多行文本,则设置父元素的line-height 等于父元素高度除于行数,
.box{ background-color: pink; height: 50px; line-height: 25px; } .con span{ line-height: 50px; } <div class="box"> <span> 111111</span><br> <span> 111111</span><br> </div>
2.3 父元素为块状元素,子元素也为块状元素,
2.3.1 子元素高度未知,改变父元素的display 属性 设置为 table-cell,然后设置vertical-align:middle;
<style> .box{ background-color: pink; height: 50px; display: table-cell; vertical-align:middle; } .box .con-box{ background-color: aqua; } </style> <div class="box"> <div class="con-box"> 1111 </div> </div>
2.3.2 子元素高度已知,则设置margin-top,元素高度减去子元素高度除于2; 记住一定要设置父元素的overflow: hidden;
(相邻块状元素 margin会共享,取最大值,不设置overflow: hidden,子元素的margin-top:10px 会跑到父元素上)
<style> .box{ background-color: pink; height: 50px; overflow: hidden; } .box .con-box{ margin-top: 10px; height: 30px; line-height: 30px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> 1111 </div> </div>
2.3.3 子元素为图片,直接可以设置父元素display: table-cell; vertical-align: middle;
<style> .box{ background-color: pink; height: 450px; display: table-cell; vertical-align: middle; } </style>
2.3.4 子元素为多个,比如图片,外加别的行内元素,使用2.3.3,文本可以不用改变,必读给图片加 vertical-align: middle;
<style> .box{ background-color: pink; height: 450px; display: table-cell; vertical-align: middle; } img{ vertical-align: middle } </style> <div class="box"> <img src="../xunguang-4.jpg" alt=""> <span>12123123</span> 1111111 </div>
3.CSS 水平垂直居中 上面两两组和使可以实现的,我们主要看一下定位和flex 实现水平垂直居中
3.1子元素高度未知,高度已知的块状元素水平垂直居中,(宽度未知,块状元素肯定使占满整行的,就不存在水平居中了)
3.1.1使用定位配置,配合margin 0 auto ,top 50%,宽度未知,只能使用transform:translateY(-50%);
<style> .box{ background-color: pink; height: 450px; position: relative; // relative 默认沾满整行,absolute话,未设置宽度则由子元素撑开 overflow: hidden; } .box .con-box{ position: relative; width: 300px; margin: 0 auto; background-color: aqua; top:50%; transform: translateY(-50%); } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
3.1.2,使用定位,子元素 left 0 right 0 top 0 bottom 0 margin auto (一定要注意父子元素的定位属性)
<style> .box{ background-color: pink; height: 450px; position: relative; /* 父元素一定为relative */ overflow: hidden; } .box .con-box{ position: absolute; /* *子元素一定 为absolete*/ width: 300px; background-color: aqua; top:0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
3.2 ,子元素宽度,高度都已知,3.1 上的两种方法都适用宽度高度已经的子元素水平垂直居中
3.2.1 margin-top: -width/2 具体的值, transform: translateY(-50%) 这个有兼容性问题,需要ie9以上,具体宽度值则无兼容性问题,
<style> .box{ background-color: pink; height: 450px; position: relative; overflow: hidden; } .box .con-box{ position: relative; width: 300px; height: 400px; margin: 0 auto; background-color: aqua; top:50%; margin-top: -200px } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
上面方法的变化版
<style> .box{ background-color: pink; height: 450px; position: relative; overflow: hidden; } .box .con-box{ position: relative; width: 300px; height: 400px; background-color: aqua; top:50%; left: 50%; margin-top: -200px; margin-left: -150px; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
4 flex 水平垂直居中
flex 主轴上居中,交叉轴上居中,flex 有很大的兼容性问题,一般用于移动端,很简单
<style> .box{ background-color: pink; height: 450px; display: flex; justify-content: center; align-items: center } .box .con-box{ width: 300px; height: 400px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
多个子元素也一样实现
子元素可以单独设置对其方式
<style> .box{ background-color: pink; height: 450px; display: flex; justify-content: center; align-items: center } .box .con-box{ width: 200px; height: 400px; background-color: aqua; } .box .con-box2{ width: 200px; height: 400px; background-color: lightcyan; } .box .con-box3{ width: 200px; height: 400px; background-color: gold; align-self: flex-end; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> <div class="con-box2"> 123123123123 <br> 1222222222 </div> <div class="con-box3"> 123123123123 <br> 1222222222 </div> </div>
总结
1.水平居中,能使用margin: 0 auto ,这最简单的,不能的话就把子元素转化成inline,然后使用text-aglin:center,无兼容性问题。
上面达不到需求,可以考虑使用定位,移动端能使用flex 就使用flex
2. 垂直居中,单行文本,使用line-height 等于父元素高度,如果不行,就可以设置父元素display:table-cell,vertical-align: middle;
能解决一大部分问题,如果还不行就考虑定位配合margin-top:-width/2,使用margin。移动端能使用flex 就使用flex.
如果您还有更好的方法,欢迎给我留言,共同学习,共同进步。up
原文链接:https://www.cnblogs.com/czkolve/p/10686182.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:块级元素
下一篇:那些年使用过的清除浮动的方法
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash