当前位置:澳门贵宾厅 > 澳门贵宾厅 > 那么此时伪元素也是跟随着,要让他澳门贵宾厅 垂直居中如何实现这个呢 下面是我常用的两种方法
那么此时伪元素也是跟随着,要让他澳门贵宾厅 垂直居中如何实现这个呢 下面是我常用的两种方法
2020-04-15

原文链接

css 宽高自适应的div 元素 如何居中 垂直居中,cssdiv

在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法

上代码

  下面的是 结构代码 

  <div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中

  <div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开

  <img width="100px" src="img/logo.a68568a.png"/>

  </div>

  </div>

  下面是样式代码

       .wrap{设置一个居中的外框

        width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

text-align: center;//水平居中

}

.wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用

display: inline-block;

content: '';

height: 100%;

width: 0;

vertical-align: middle;//垂直居中

}

.center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了

vertical-align: middle;

display: inline-block;

}

img{

vertical-align: top;

}

 

  二 css3 transform解决

    .wrap{//一个固定宽高 居中的外框

width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

}

    .center{//我们的center div 还是写成inline-block 的样式

         position: relative;

          //相对定位 通过相对定位left  top 值的设置来让center div 的左上角的位置 为wrap 的中心

          //但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了

          //通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中(轴心点默认在左上角)

          //注意transform各个浏览器有不同的前缀并且不兼容ie8 以下

 top: 50%;

 left: 50%;

 display: inline-block;

-webkit-transform: translateX(-50%) translateY(-50%);

}

img{

vertical-align: top;

}

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">document{height: 100%;}html{height: 100%;}body{height: 100%;overflow: hidden;margin: 0;}#bigwrap{width: 100%;height: 100%;text-align: center;}#bigwrap:before{height: 100%;width: 0;vertical-align: middle;content: '';display: inline-block;}.wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}.wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}.center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}/*.center {   position: fixed;  top: 50%;  left: 50%;  background-color: #000;  width:50%;  height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}*/</style></head><body><!--<div id="bigwrap">--><div class="wrap"><div class="center"><img width="100px" src="img/logo.a68568a.png"/></div></div></div></body></html>

 

宽高自适应的div 元素 如何居中 垂直居中,cssdiv 在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂...

  1. border+transform

css样式为

这个比较好理解了,设置display:flex,然后两个伪元素分别铺满剩余空间。

html结构为

css样式为

主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

时间: 2019-12-18阅读: 94标签: 自适应1.伪元素+transform:translateX(-100%);

.title{ position: relative; text-align: center; font-size: 14px; color: #999; overflow: hidden; padding: .6em 0;/**把高度撑起来**/}.inner{ position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; line-height: 1px; border-left: 9999px solid #ccc; border-right: 9999px solid #ccc; padding: 0 10px;}

具体实现如下

.title{ text-align: center; font-size: 14px; color: #999; overflow: hidden;}.title::before,.title::after{ content: ''; display: inline-block; width: 0; height: 1px; box-shadow: 0 0 0 9999px #ccc; vertical-align: middle;}.title::before{ margin-right: 10px; clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);}.title::after{ margin-left: 10px; clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);}

具体实现如下

css样式为

div  span 我是分割线/span/div

具体实现如下

这个实现需要多一层标签,外部仍然是text-align: center,内部文本里添加两个伪元素绝对定位,其中左边的设置距离右边100%(相对于文本标签)即可

.title{ display: table; font-size: 14px; color: #999;}.inner{ display: table-cell; white-space: nowrap; padding: 0 10px;}.title::before,.title::after{ content: ''; display: table-cell; width: 9999px; overflow: hidden; background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**这里用线性渐变生成的,也可以用其他方式**/ background-size: 100% 1px;}

小结

html结构为

.title{ position: relative; text-align: center; overflow: hidden; font-size: 14px; color: #999;}.title::before,.title::after{ content: ''; display: inline-block; width: 100%; height: 1px; position: absolute; background: #ccc; top: 50%;}.title::before{ margin-left: -10px; transform: translateX(-100%);}.title::after{ margin-left: 10px;}
div我是分割线/div
div我是分割线/div

css样式为

同样利用text-align: center使文本和伪元素居中,然后生成足够大的box-shadow或者outline,由于不支持单个方向,所以用clip-path或者clip裁剪掉

css样式为

html结构为

上面一共列举了8中方式来实现分隔线的效果,每种方法思路各不相同,重要的是可以发散自己的想象力,可能这才是CSS与其他语言所不同的吧~

html结构为

6.伪元素+border+left/right

html结构为

8.fieldset+legend

css样式为

html结构为

这个思路只需要一个伪元素,在文本内部生成一个伪元素,利用足够大的border和相同的负值(绝对定位+left/right)还原位置

2.伪元素+flex

css样式为

这个思路可以不用到伪元素,不过需要额外的标签,给内部文本左右足够大的1px边框,此时需要设置line-height:1px,由于内部整体以及足够大了(超过父级),可以使用绝对定位和transform: translateX(-50%)居中

具体实现如下

div  span 我是分割线/span/div

4.伪元素+right:100%

具体实现如下

div我是分割线/div

具体实现如下

.title{ text-align: center; font-size: 14px; color: #999; overflow: hidden;}.inner{ position: relative;}.inner::before,.inner::after{ position: absolute; content: ''; width: 9999px; height: 1px; background: #ccc; top: 50%;}.inner::before{ right: 100%; margin-right: 10px;}.inner::after{ margin-left: 10px;}

主要思路为父级设置display:table,伪元素设置display:table-cell,并设置足够大的宽度即可

具体实现如下

div  span 我是分割线/span/div

html结构为

html结构为

具体实现如下

3.伪元素+box-shadow/outline+clip-path

利用fieldset和legend标签组合,可以天然实现分隔线效果,参考至张鑫旭的这篇文章

这里整理了一下,整体效果如下,可访问这里查看,大家在实际项目中可自行选取所需要的方式

7.伪元素+table-cell

.title{ font-size: 14px; color: #999; border: 0; border-top: 1px solid #ccc; padding: 0;}.inner{ margin: 0 auto;; padding: 0 10px;}
.title{ text-align: center; font-size: 14px; color: #999; overflow: hidden;}.inner{ position: relative; padding: 0 10px;}.inner::before{ content: ''; position: absolute; height: 1px; top: 50%; border-left: 9999px solid #ccc; border-right: 9999px solid #ccc; right: -9999px; left: -9999px;}

css样式为

fieldset  legend 我是分割线/legend/fieldset
div  span 我是分割线/span/div
.title{ display: flex; align-items: center; font-size: 14px; color: #999;}.title::before,.title::after{ content: ''; flex: 1; height: 1px; background: #ccc;}.title::before{ margin-right: 10px;}.title::after{ margin-left: 10px;}