一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落
<divclass="flex"> <div><p>我是多行文字我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字我是多行文字</p></div> </div> CSS代码: .flex{/*flex 布局*/display: flex;/*实现垂直居中*/align-items: center;/*实现水平居中*/justify-content: center;text-...
方法一:给父元素加上如上代码 display:flex; //弹性布局 justify-content:center; //子元素相对父元素水平(主轴)居中 align-items:center; //子元素相对父元素垂直(交叉轴)居中 不足之处:父容器里的所有子元素们都垂直居中了。(如果父容器里有多个子元素的话,我们只想指定某个子元素居中,则可以用方法二。 ...
1. 使用 Flexbox Flexbox 是最常用的方法之一，代码简洁且兼容性好。.container { display: flex...
上面代码中， 最外层的 div 就是容器，内层的三个 div 就是项目。注意： 项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素，比如上面代码的 p 元素就不是项目。flex布局只对项目生效。2.2 主轴（Main Axis）和交叉轴（Cross Axis）主轴是Flex项目的排列方向，交叉轴则是垂直于主轴的方向。主轴（...
<div class="box size">垂直水平居中</div> </div> </body> 公共css代码如下 <style type="text/css"> /* 公共样式 */ .div1{ width: 300px; height: 300px; border:1px solid aqua; } .box{ background: #00FFFF; } .box.size{
大家经常用到的,某个div里面水平垂直居中, image <!DOCTYPE html><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; ...
<div class="box"> <span class="item">垂直居中 -- 内联元素 display:inline</span> </div> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 方案二:flex布局【推荐】 ...
方案2(设置为flex布局): <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divstyle="background: pink; width: 500px;heig...