内容简介:方法: 给行内元素父元素使用text-align: center方法: 块级元素使用margin: 0 auto。若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。
方法: 给行内元素父元素使用text-align: center
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; text-align: center; } .box > span { background: pink; } </style> <div class="box"> <span>行内元素水平居中</span> </div> 复制代码
块级元素水平居中
方法: 块级元素使用margin: 0 auto。
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { width: 200px; background: pink; margin: 0 auto; } </style> <div class="box"> <p>块级元素水平居中</p> </div> 复制代码
fit-content + margin: 0 auto
若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; width: fit-content; margin: 0 auto; } .box > p { float: left; width: 300px; background: pink; } </style> <div class="box"> <p>块级元素水平居中: 子元素浮动</p> </div> 复制代码
关于fit-content推荐阅读 理解CSS3 max/min-content及fit-content等width值
flex + justify-content: center
<style> * { margin: 0; padding: 0; } .box { display: flex; justify-content: center; border: 1px solid blue; height: 200px; } .box > p { width: 300px; background: pink; } </style> <div class="box"> <p>flex + justify-content: center</p> </div> 复制代码
absolute + transform
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { position: absolute; left: 50%; background: pink; transform: translate(-50%, 0); } </style> <div class="box"> <p>宽度未知: absolute + transform</p> </div> 复制代码
关于transform使用推荐阅读 理解SVG transform坐标变换
已知宽度: absolute + 负值的margin-left
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { position: absolute; left: 50%; width: 300px; background: pink; margin-left: -150px; /*-0.5width*/ } </style> <div class="box"> <p>宽度已知: absolute + 负值的margin-left</p> </div> 复制代码
宽度已知: absolute + left:0;right:0;margin:0 auto
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { position: absolute; left: 0; right: 0; width: 300px; background: pink; margin: 0 auto; } </style> <div class="box"> <p>宽度已知: absolute + left:0;right:0;margin:0 auto</p> </div> 复制代码
垂直居中
已知父元素高度情况: line-height: height
若元素是单行文本, 则可设置 line-height 等于父元素高度。
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { background: pink; line-height: 200px; } </style> <div class="box"> <p>已知父元素高度情况: line-height: height</p> </div> 复制代码
已经父元素高度: 若元素是行内块级元素如img, 可以使用display: inline-block, vertical-align: middle和一个伪元素。
<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box::after { content: ''; height: 100%; } .box > img, .box::after { display: inline-block; vertical-align: middle; width: 100px; } </style> <div class="box"> <img src="./mm.png" alt=""> </div> 复制代码
flex + align-items: center
absolute + transform
<style> * { margin: 0; padding: 0; } .box { position: relative; height: 200px; border: 1px solid blue; } .box > p { position: absolute; top: 50%; transform: translate(0, -50%); background: pink; } </style> <div class="box"> <p>absolute + transform</p> </div> 复制代码
display: table
<style> * { margin: 0; padding: 0; } .box { display: table; width: 100%; height: 200px; border: 1px solid blue; } .box > p { display: table-cell; /* 类似于表格中的单元格, 此时vertical-align: middle才生效 */ vertical-align: middle; } </style> <div class="box"> <p>flex</p> </div> 复制代码
水平垂直居中
absolute + transform
<style> * { margin: 0; padding: 0; } .box { position: relative; height: 200px; border: 1px solid blue; } .box > p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: pink; } </style> <div class="box"> <p>absolute + transform</p> </div> 复制代码
flex
table水平垂直居中
方法: inline-block + text-align + table-cell + vertical-align
<style> * { margin: 0; padding: 0; } .box { display: table-cell; width: 100vw; height: 200px; border: 1px solid blue; text-align: center; /*水平居中*/ vertical-align: middle; /*垂直居中*/ } .box > span { } .box > p { width: 100px; display: inline-block; /* 防止块级元素宽度独占一行,内联元素可不设置 */ } </style> <div class="box"> <p>块级元素: table水平垂直居中</p> </div> <div class="box"> <span>行内元素: table水平垂直居中</span> </div> 复制代码
知道父元素高度,子元素高度
方法: 绝对定位方式+四个方向置0 + margin: auto
<style> * { margin: 0; padding: 0; } .box { position: relative; height: 300px; border: 1px solid blue; } .box > p { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px; } </style> <div class="box"> <p>绝对定位方式+四个方向置0</p> </div> 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。